Compiler et encapsuler Twitter Bootstrap dans un namespace

grunt-logoIl peut parfois être utile d’encapsuler le CSS de Twitter Bootstrap pour par exemple éviter les conflits lorsque l’ont intègre Bootstrap dans un site existant. Cette opération permet en effet d’ajouter un namespace à tous les sélecteurs.

Exemple avec le namespace « bootstrap-styles »:

.bootstrap-styles textarea {
overflow: auto;
}
.bootstrap-styles optgroup {
font-weight: bold;
}

Pour encapsuler bootstrap, il faut compiler le fichier bootstrap.less à l’aide de Grunt.

Installation de Grunt

Installation de Node.js

sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Installation de Git

sudo  apt-get install git git-core

Clonage de bootstrap depuis github

git clone https://github.com/twbs/bootstrap.git

Installation de Grunt

sudo npm install -g grunt-cli
cd bootstrap
sudo npm install

Compilation

Editer le fichier bootstrap.less pour ajouter la classe bootstrap-styles autour de tous les imports:

cd less/
vim bootstrap.less

contenu de bootstrap.less

.bootstrap-styles {
// Core variables and mixins
@import "variables.less";
@import "mixins.less";

[...]
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
}

Pour compiler le CSS et le Javascript:

grunt dist

Les fichiers compilés se trouveront ensuite dans le dossier dist.

Attention, même les sélecteurs html et body seront préfixés de .bootstrap-styles. Étant donné que les balises html et body sont rarement entourées de balises div dans le code source d’une page web, il faut donc supprimer ou modifier ces deux entrées dans le fichier bootstrap.css

Testé sous Ubuntu 14.04 serveur

sources:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *