Personnaliser ses styles css et Twitter Bootstrap avec Less

Personnaliser son site construit avec un framework (Twitter Bootstrap par ex.) est rapidement indispensable pour se démarquer de la multitude de sites qui utilisent le même framework avec le style par défaut. Utiliser les bons outils permet d’adapter rapidement les styles à l’identité visuelle du client.

Le framework Twitter Bootstrap – celui avec lequel on travaille – peut être téléchargé sous sa forme non compilée, il se compose alors d’un ensemble de fichiers en language Less qui permet la génération dynamique de feuilles de style. Les fichiers d’extension .less fournis surchargent la syntaxe css et ajoutent les mécanismes de variables, d’imbrication, de mixins, opérateurs et fonctions. Voir Wikipédia.

Le but de ce document n’est pas d’être exhaustif, il ne couvrira que le nécessaire pour générer les feuilles de style d’une application. Le sujet est très documenté, on trouve rapidement de bons articles, et le seul objectif est de conserver une trace du cheminement suivi en interne sur mes applications.

Installation du pré-processeur Less

Less tourne à l’intérieur de Node.js, qui est un moteur d’exécution JavaScript construit sur le moteur JavaScript de Chrome. Ce dernier permet d’installer Less à l’aide d’une simple ligne de commande. (Notez qu’il existe également des applications tierces qui permettent de compiler les .less)

Installez Node.js à l’aide d’un exécutable (sous Windows).

Installez Less depuis le gestionnaire de paquets de Node.js

npm install -g less

Installez l’extension clean-css qui permet de rapetisser (minify) les styles css générés.

npm install -g less-plugin-clean-css

Vous pouvez vous référer à la documentation de démarrage rapide sous Less

Nous nous intéresserons uniquement à l’usage en ligne de commande, un fichier de style est généré par défaut sur la sortie standard depuis un fichier .less, ou bien dans le fichier fourni en paramètre.

lessc styles.less styles.css

Ou bien version rapetissée (avec les options de compatibilité par défaut)

lessc --clean-css styles.less styles.min.css

Structure du framework css

Bootstrap fait usage de Less pour tout paramétrer, jusqu’aux propriétés de la grille css qui sont construites à partir de variables et fonctions mathématiques.

Tout est basé sur des variables, toutes stockées dans un seul endroit. Cela permet à Bootstrap d’être construit sur un ensemble de données hautement personnalisable.

J’utilise un thème acheté en ligne qui exploite Twitter Bootstrap, il est organisé de façon à pouvoir recompiler Bootstrap pour personnalisation, avec des fichiers sources. Les fichiers less sont sous le répertoire \web\vendor\bootstrap\less\ qui contient tous les fichiers source .less organisés en briques à importer depuis le fichier d’indexe : bootstrap.less

less

Ce fichier est le point d’entrée sur lequel on pourrait lancer la commande de compilation, vous pouvez voir comment il commence par importer les variables puis les mixins et ensuite toutes les autres briques qui composent le framework. Bien entendu on peut supprimer de ce fichier tout ce qui n’est pas utile à la mise en page de l’application pour alléger le fichier de style final, on peut également personnaliser chaque brique, à commencer par les variables !

Je ne vais pas personnaliser Twitter Bootstrap à partir des fichiers du framework, comme j’utilise un thème qui surcharge Bootstrap il me faut modifier le thème et celui ci n’est fourni qu’en css, c’est bien dommage. Qu’à cela ne tienne, il suffit de créer un fichier de surcharge .less pour commencer à travailler avec des variables, à commencer par les couleurs.

Sous le répertoire /web/less je créé un fichier override.less qui importe un mélangeur (mixins) qui a pour finalité d’apporter une fonctionnalité de boucle.

lessc override.less ../styles/override.css
lessc style.less ../styles/style.css

Le fichier override.css est importé en dernier dans les codes sources de l’application.

Le contenu du fichier override.css permet de boucler sur des valeurs textuelles pour générer des classes.

lessc bootstrap.less ../dist/css/bootstrap-custom.css

Less opérations courantes !

Ce document ne se destine pas à des designers ni des développeurs front-end, non, on veut seulement l’essentiel pour les opérations de façade sur des applications à public restreint.

Jouer avec les fonctions de couleurs et les opérateurs nous est particulièrement utile

Pour les couleurs, on peut les manipuler de base avec ces fonctions :

lighten(@color, 10%); // renvoie une couleur 10% plus claire que @color
darken(@color, 10%); // renvoie une couleur 10% plus foncée que @color
saturate(@color, 10%); // renvoie une couleur 10% plus saturée que @color // renvoie une couleur 10% moins saturée que @color
fadein(@color, 10%); // renvoie une couleur 10% moins transparente que @color
fadeout(@color, 10%); // renvoie une couleur 10% plus transparente que @color
fade(@color, 50%); // renvoie @color avec 50% de transparence
spin(@color, 10); // renvoie une couleur qui a une couleur décalée de 10° dans le spectre par rapport à @color
spin(@color, -10); // renvoie une couleur qui a une couleur décalée de -10° dans le spectre par rapport à @color
mix(@color1, @color2); // renvoie un mélange de @color1 et @color2

hue(@color);        // renvoie la teinte de @color
saturation(@color); // renvoie la saturation de @color
lightness(@color);  // renvoie la luminosité de @color
alpha(@color);      // renvoie la transparence de @color

@new: hsl(hue(@old), 45%, 90%); // Cree une nouvelle couleur depuis une autre couleur

Les opérateurs peuvent affecter une couleur ou bien un unité de taille. Quelques exemples :

@coldgray: #b9b5a9;
@lightgray: @coldgray + #333;
@darkgray: @coldgray - #333;
@border: 1px;
.box1 {
	border-top: @border ;
	border-bottom: @border * 2;
}

Ces exemple sont tirés d’un bon article en français que je vous invite à consulter.

Au delà des couleurs et des tailles, il faut pouvoir générer des styles en boucle, cela peut se faire en important des mélangeurs dédiés à cela.
Pour boucler en less, voir un exemple de for-each

Les mélangeurs (fichier for.less à importer) :

// ............................................................
// .for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}

Avec ces constructions il devient possible de générer des classes css pour des listes d’éléments ! Regardez l’exemple ci dessous : d’abord on défini une liste, puis une couleur nommée pour chaque élément de la liste. Deux mélangeurs permettent de générer les classes à appliquer à des boutons, finalement le dernier appel boucle sur la liste d’éléments pour construire les classes.

@import "for";

@list: primary info success warning warning2 danger;

@primary: #ac1c72;
@info: lighten(#18417f, 10%);
@success: #62cb31;
@warning: #ffb606;
@danger: red;
@container: #edf0f5;

.button-background-color (@background-color) {
    background-color: @background-color;
    border-color: @background-color;
}

.button-color (@background-color, @color: inherit) {
    .button-background-color (@background-color);
    color: @color;
}

.for(@list); .-each(@name) {
    .btn-@{name} {
        .button-color(@@name, #FFFFFF);
    }
    .btn-@{name}:hover, .btn-@{name}:focus, .btn-@{name}:active, .btn-@{name}.active, .open .dropdown-toggle.btn-@{name} {
        .button-color(lighten(@@name, 10%), #FFFFFF);
    }
    //...
}

Au final il nous sera utile d’arrondir les angles sur des boutons et des conteneurs, le mieux est d’utiliser une librairie de mélangeurs prêts à l’emploi.

La librairie la plus complète est sans doute Less Hat 3, à télécharger et utiliser librement, la collection la plus simple est sans doute Less elements.

Quelques exemples tirés de Less Hat pour finir :

div {
 .border-radius(5px);
}
div {
 .border-top-left-radius(5px);
}
div {
 .box-shadow(0 1px 10px rgba(20,20,20,0.5));
}
div {
 .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
}
Faites découvrir ce billet...Email this to someonePrint this pageShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn