Bootstrap est conçu sur une base LESS CSS permettant de rendre les feuilles de styles dynamiques. Pour commencer à utiliser LESS CSS, le framework propose de multiples façons de l’installer. Découvrons dès à présent comment installer LESS CSS avec Grunt.
Après avoir téléchargé le dossier « source » de Bootstrap destiné à l’utilisation de LESS CSS, le framework nous demande d’installer Node.js pour les différents modules indispensables au bon fonctionnement de Grunt et Bootstrap.
Installer Grunt
Ouvrez votre terminal, lancez la commande, puis pressez « entrer ».
Pour Macintosh :
sudo npm install -g grunt-cli
Pour Window :
npm install -g grunt-cli
Pointer vers le dist
À présent, nous devons définir la direction « root » vers le dossier « dist » de Bootstrap afin d’installer les packages npm « package.json« . Cela va permettre d’apporter les différents modules indispensables à Grunt pour compiler LESS CSS avec Bootstrap.
Voici ci-contre, l’organisation du dossier source de Bootstrap :
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
À noter que le dossier source (précédemment téléchargé) est renommé « bootstrap ». Faisons de même.
Il ne nous reste plus qu’à rediriger en fonction de l’emplacement de votre dossier source et de sa dénomination. Pour faire le plus simple possible, je vous recommande chaudement de placer le dossier source renommé « bootstrap » sur le bureau de votre ordinateur.
cd Desktop/Bootstrap
Installer les npm
Nous venons de l’évoquer. Les npm regroupes l’intégralité des modules nécessaire au bon fonctionnement de LESS CSS avec Grunt et Bootstrap. Après avoir « rooté » vers le dossier « dist », nous pouvons lancer l’installation avec la commande ci-dessous.
Pour Macintosh :
sudo npm install
Pour Window :
npm install
Vous pouvez dès à présent utiliser LESS CSS pour Bootstrap avec Grunt.
Compiler le CSS
Lorsque vous souhaitez voir les modifications LESS apportées à vos fichiers, vous devez effectuer (à chaque fois!) la commande suivante permettant de compiler les fichiers LESS en un fichier bootstrap.css :
grunt dist
cd ~/Desktop/Bootstrap
3 commentaires
Découvrez CodeKit - monbootstrap
[…] un précédent article Installer LESS CSS avec Grunt nous avons aborder comment installer LESS CSS avec Grunt pour l’utiliser sous Bootstrap. […]
Benoît Philibert
Ras le bol de compiler manuellement ? Découvrez mon article sur CodeKit http://monbootstrap.fr/decouvrez-codekit
Débuter avec SASS & SCSS - MonBootstrapMonBootstrap
[…] alternatives à LESS et un style d’écriture différent. Nous vous avons déjà présenté LESS CSS sur Monbootstrap et il est bon de rappeler que Bootstrap a été construit avec, (jusqu’à la version 4) ce […]