SlideShare une entreprise Scribd logo
Minimiser la dette technique de Boostrap 
à l'aide d'un préprocesseur CSS 
Mathieu Le Gac 
@mateoelgaco 
CEO @Escale Digitale
The most popular front-end framework for 
developing responsive, mobile first projects 
on the web. 
Utilisé sur 100% de notre production depuis 1 an 
soit 3 versions majeures différentes
Usage - V2.3.2 
Usage - V3.1.1
Problème 1 
Changement des noms et 
variables au fil des versions
Problème 2 
La logique dans le HTML ! 
« ... et la màj ça se passe comment ? »
La Solution 
Localiser la dette technique sur le style 
Le MVC du bon intégrateur
Les préprocesseurs 
Nous viennent en aide 
En attendant CSS4 ... 
! 
• Des variables 
• Des fonctions 
• ... et plein d’autres features
HTML 
LESS
Protips 
! 
Bootstrap 3.1.1 supporte LESS / SASS 
@mdo «make our own Bootstrap» 
MERCI 
@mateoelgaco

Contenu connexe

Tendances

Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
JEAN-GUILLAUME DUJARDIN
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
Jonathan Le Guellec
 
Angularjs101 p2
Angularjs101 p2Angularjs101 p2
Angularjs101 p2
eric German
 
Angularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la videoAngularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la video
eric German
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
Jean-Pierre Vincent
 
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Symetris
 
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et AzureApproche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
CEDRIC DERUE
 
Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.js
Guillaume Meyer
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
Olivier Nourry
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
Thomas Champion
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
Daniel Roch - SeoMix
 
Sulu LE CMS Ultime
Sulu LE CMS UltimeSulu LE CMS Ultime
Sulu LE CMS Ultime
Julien Vinber
 
Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014
Laurent Séguin
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
AntoineLEGRAND18
 
Les avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blogLes avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blog
informagenie
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Bilel ZEGHAD
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
TribuAndCo
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
Horacio Gonzalez
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
TelecomValley
 

Tendances (20)

Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
 
Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015
 
Angularjs101 p2
Angularjs101 p2Angularjs101 p2
Angularjs101 p2
 
Angularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la videoAngularjs101-les_SPA:support de la video
Angularjs101-les_SPA:support de la video
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014
 
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et AzureApproche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
Approche DevOps pour builder une solution robuste PHP avec Zend_Server et Azure
 
Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.js
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Sulu LE CMS Ultime
Sulu LE CMS UltimeSulu LE CMS Ultime
Sulu LE CMS Ultime
 
Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014
 
WF3Programmedeformation
WF3ProgrammedeformationWF3Programmedeformation
WF3Programmedeformation
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
 
Les avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blogLes avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blog
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 

Similaire à Human talks-bootstrap

Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
davrous
 
Créer et intégrer son thème PrestaShop
Créer et intégrer son thème PrestaShopCréer et intégrer son thème PrestaShop
Créer et intégrer son thème PrestaShop
PrestaShop
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
Cellenza
 
Rex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - EnsimRex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - Ensim
Laurent Broudoux
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
Microsoft
 
L'agilité en entreprise avec TFS 2013
L'agilité en entreprise avec TFS 2013L'agilité en entreprise avec TFS 2013
L'agilité en entreprise avec TFS 2013
Microsoft
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Renoir Boulanger
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
Ouadie LAHDIOUI
 
Competitic solution adaptée pour site internet - numerique en entreprise
Competitic   solution adaptée pour site internet - numerique en entrepriseCompetitic   solution adaptée pour site internet - numerique en entreprise
Competitic solution adaptée pour site internet - numerique en entreprise
COMPETITIC
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Objecteering mdday2010
Objecteering mdday2010Objecteering mdday2010
Objecteering mdday2010
MD DAY
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Microsoft
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
George Edward Mbella Mbella
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
Boubker ABERWAG
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 

Similaire à Human talks-bootstrap (20)

Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
Créer et intégrer son thème PrestaShop
Créer et intégrer son thème PrestaShopCréer et intégrer son thème PrestaShop
Créer et intégrer son thème PrestaShop
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Rex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - EnsimRex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - Ensim
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
L'agilité en entreprise avec TFS 2013
L'agilité en entreprise avec TFS 2013L'agilité en entreprise avec TFS 2013
L'agilité en entreprise avec TFS 2013
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Competitic solution adaptée pour site internet - numerique en entreprise
Competitic   solution adaptée pour site internet - numerique en entrepriseCompetitic   solution adaptée pour site internet - numerique en entreprise
Competitic solution adaptée pour site internet - numerique en entreprise
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Objecteering mdday2010
Objecteering mdday2010Objecteering mdday2010
Objecteering mdday2010
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 

Human talks-bootstrap

  • 1. Minimiser la dette technique de Boostrap à l'aide d'un préprocesseur CSS Mathieu Le Gac @mateoelgaco CEO @Escale Digitale
  • 2. The most popular front-end framework for developing responsive, mobile first projects on the web. Utilisé sur 100% de notre production depuis 1 an soit 3 versions majeures différentes
  • 3. Usage - V2.3.2 Usage - V3.1.1
  • 4. Problème 1 Changement des noms et variables au fil des versions
  • 5. Problème 2 La logique dans le HTML ! « ... et la màj ça se passe comment ? »
  • 6. La Solution Localiser la dette technique sur le style Le MVC du bon intégrateur
  • 7. Les préprocesseurs Nous viennent en aide En attendant CSS4 ... ! • Des variables • Des fonctions • ... et plein d’autres features
  • 9. Protips ! Bootstrap 3.1.1 supporte LESS / SASS @mdo «make our own Bootstrap» MERCI @mateoelgaco