SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Challenge Exakis - Visual studio 2015
Challenge Exakis - Visual studio 2015Jonathan Le Guellec
 
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 videoeric German
 
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 2014Symetris
 
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 AzureCEDRIC 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.jsGuillaume 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 SideThomas 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 & SeoMixDaniel Roch - SeoMix
 
Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Laurent Séguin
 
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 bloginformagenie
 
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.jsTelecomValley
 

La actualidad más candente (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
 

Similar a Human talks-bootstrap

Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Inteldavrous
 
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 PrestaShopPrestaShop
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
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.1Cellenza
 
Rex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - EnsimRex Software Factories 20140117 - Ensim
Rex Software Factories 20140117 - EnsimLaurent 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.1Microsoft
 
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 2013Microsoft
 
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 DrupalAdyax
 
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
 
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éeOuadie 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 entrepriseCOMPETITIC
 
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 8davrous
 
Objecteering mdday2010
Objecteering mdday2010Objecteering mdday2010
Objecteering mdday2010MD 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
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFBoubker ABERWAG
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...Sid Ahmed Benkraoua
 

Similar a 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...
 
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
 
conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...conception et réalisation plateforme collaboratif basant sur la methode agile...
conception et réalisation plateforme collaboratif basant sur la methode agile...
 

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