Développement Bootstrap avec Sass

Aujourd’hui, petit article de présentation d’une méthode de développement pour Bootstrap avec le préprocesseur CSS Sass.

J’avais partagé il y a quelques temps ma méthode de travail pour Bootstrap avec LESS et Grunt. Je traite aujourd’hui le même sujet mais avec l’utilisation de Sass au lieu de LESS comme préprocesseur CSS.

En effet, la future version 4 de Bootstrap (déjà disponible en version alpha) a été migrée entièrement vers Sass pour une compilation plus rapide. Il m’a donc semblé judicieux de me préparer un modèle de projet Bootstrap utilisant Sass.

J’utilise habituellement Grunt pour gérer mes tâches lors du développement (compilation automatique, compression de fichiers JS ou CSS…) et Bower pour importer les composants nécessaires (Bootstrap, Font Awesome, jQuery…). J’ai créé un modèle de projet frère à celui présenté ici, mais utilisant Sass. Ce modèle de projet est disponible sur GitHub.

Je rappelle que pour utiliser Grunt et Bower il faut avoir préalablement avoir installé le framework Javascript Node.js. C’est grâce au gestionnaire de paquet de Node qu’on va installer Grunt et Bower.

Installation

1. Cloner le dépôt Git ou télécharger et extraire l’archive : https://github.com/Hugo8705/grunt-sass-bootstrap
2. Avec l’invite de commande, se placer dans le dossier (commande cd)
3. Lancer la commande bower install pour installer les composants utilisés, soit Bootstrap et Font Awesome (qui sont spécifiés dans le fichier bower.json)
4. Vous pouvez si besoin lancer la commande bower list pour lister les composants utilisés et les mises à jour disponibles. Ensuite, vous pouvez lancer bower update pour appliquer les mises à jour.
5. Lancer la commande npm install qui va installer Grunt et les composants nécessaires à ce dernier (qui sont spécifiés dans le fichier package.json)
6. Lancer la commande grunt copy pour copier les fichiers Javascript vers le dossier public

Utilisation

Lancer la commande grunt pour surveiller les modifications de fichier, vous pouvez commencer à travailler dans vos fichiers Sass. Ces derniers sont compilés automatiquement (à chaque fois qu’ils sont sauvegardés) dans public/assets/stylesheets. Si vous voules minify le fichier CSS, lancez la commande grunt cssmin.

Ce projet n’inclus pas la minification des fichiers Javascript. Vous devez ajouter cette tâche au fichier Gruntfile.js si vous en avez besoin.

Vous devez copier les fichers de polices éventuels à la main vers public/assets/fonts et votre fichier JS dans public/assets/javascript.

Avant de commencer, copier les fichier Javascript de Bootstrap et jQuery dans public/assets/javascript. Vous pouvez le faire à la main ou via la commande grunt copy.

C’est tout, vous pouvez maintenant vous lancer dans votre intégration web !