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 *

SEO: Mettre une image sur une balise html tout en gardant le texte.

Voici une petite astuce qui peut aider pour le référencement de votre site:

Niveau SEO il est préférable de faire des liens avec du texte plutôt qu’avec une image. Logique me direz-vous parce-que même si google est fortiche en reconnaissance d’image, il ne référence pas encore le texte dans les images…

Mais alors, comment faire un lien avec une image sans ralentir le référencement de mon site?
Une solution très simple existe, il suffit d’utiliser la propriété css text-indent pour cacher le texte contenu dans votre balise.

Exemple coté html:

<a id="logo" href="http://www.mon-super-site.com">mon texte</a>

Coté css:

#logo{
  background-image:url("chemin_de_mon_image.png");
  text-indent:-10000px;
}

En mettant la propriété text-indent à -1000px ou -10000px, les visiteurs de votre site ne verrons que l’image du background mais googlebot verra très bien le texte entre les balises <a> et </a> et le prendra en compte. Votre site est sauvé!

Laisser un commentaire

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