Bootstrap est un des frameworks CSS/JS les plus utilisés sur le web pour le développement de site adaptatifs et lisibles sur tous supports (mobiles, laptops, portables…) ou responsive design. C’est aussi un de mes choix favoris pour l’intégration de templates HTML avant l’intégration éventuelle sur un CMS comme WordPress, Drupal ou Joomla. Je vais présenter rapidement ici ma méthode de travail quand je développe avec Bootstrap et le pré-processeur CSS LESS.
LESS est un pré-processeur CSS, un langage permettant de générer des feuilles de styles CSS. Donc, je travaille via LESS pour créer le style de mes pages et profiter des avantages du langage : gestion de variables, organisation du code… Mes fichiers de travail sont beaucoup plus clairs et faciles à mettre à jour que si j’utilisais un seul fichier CSS pour mon site ou mon application.
J’inclus également dans mes fichiers de travail des appels à la version LESS de Bootstrap, pour pouvoir utiliser les nombreuses classes du framework : caroussels, tableaux, titre, panneaux, navigation, grille responsive design… Grâce à ce système d’inclusion, je peux facilement utiliser d’autres librairies comme Font Awesome par exemple.
Ensuite, il me faut générer les feuilles de styles, j’utilise pour cela le gestionnaire de tâches Javascript Grunt. Il me permet de ré-exporter ma feuille de style CSS à chaque fois que je modifie un fichier source LESS, et la feuille de style est copiée dans le dossier approprié de mon arborescence. Je peux aussi, minifier le fichier final et le concaténer avec d’autres fichiers. J’ai donc au final un seul fichier CSS minifié contenant les librairies nécessaires à mon site comme Bootstrap ou Font Awesome. Mais, je dispose également de fichiers de travail organisé, séparés proprement pour me retrouver facilement dans mon travail, quand je dois faire des modifications.
Vous pouvez voir consultez mon dossier de travail type disponible sur ce dépôt Git Hub. Il vous faudra Grunt et Bower (voir cet article) installés sur votre machine pour les utiliser et mettre en place le dossier de travail. Mon arborescence est la suivante :
-/bower_components // Composants nécessaires au site et importés via le gestionnaire Bower
—/font-awesome
—/bootstrap
—/jquery
-/public // dossier de production
—/index.html
—/assets
——/js
——-lib.min.js // librairie JS minifiée, contenant jQuery et les fichiers Javascript de Bootstrap
——/css
——-main.lib.js // librairie CSS minifée, contenant mon code CSS ainsi que le code CSS Boostrap
-/src
—/assets
——/css // dossier source contenant mes fichiers de travail LESS, les fichiers LESS de Bootstrap sont appelés directement via un import CSS dans base.less
——-base.less
——-components.less
——-…
——/js //dossier source contenant mes fichier de travail Javascript
——-my_scripts.js
——-…
-Gruntfile.js // Fichier Grunt qui gère les tâches de génération des librairies finales
1 commentaire