Une des nouvelles fonctionnalités proposées par Joomla! 3 est l'implémentation de LESS. Beaucoup ont déjà entendu parlé de ce que cette fonctionalité apporte et comment elle peut être utilisée, mais pour ceux qui ne la connaitraient pas (ou qui veulent se rafraichir la mémoire), l'article qui suit expose certains de ses bénéfices et comment en faire moins (LESS) dans Joomla!
LESS est une feuille de style dynamique. Pour comprendre plus facilement LESS, on peut dire que c'est une fonctionnalité très proche du PHP. En effet, un petit peu comme le PHP qui est interprété par le serveur et qui renvoies le code HTML correspondant, LESS est interprété par le serveur et ce dernier renvoies le code CSS correspondant. C'est aussi simple que cela.
Pour être plus précis, LESS apporte au CSS des fonctionnalités supplémentaires. Cet article se focalise sur trois d'entre elles : les variables, les mixins et les fonctions.
Les variables
Avec LESS, il est possible de créer des variables pouvant être réutilisées dans la feuille de style. Ci-dessous ont été définies trois variables avec un exemple de leur utilisation possible dans le template.
@primaire : #336699;
@secondaire : #444444;
@couleurbord : #d5d4d4;
Une fois ces variables définies, vous pouvez les utiliser n'importe où plus tard dans le code.
a.readon
{
color: @secondaire;
}
h1
{
color: @primaire;
border: 1px solid @couleurbord;
}
Lorsque le code est lu par le serveur, celui-ci fourni un code similaire à ce que vous avez l'habitude de voir.
C'est aussi simple que cela. On ne s'en rend peut être pas compte dans cet exemple mais cela peut être très bénéfique et peut faire gagner énormément de temps puisque dans un fichier de plusieurs centaines de lignes de code, il devient aisé de changer de style en modifiant seulement la valeur d'une variable en début de fichier.
Les Mixins
Cette fonctionnalité consiste à ajouter et définir des styles avancés au sein d'un autre style. En d'autres termes, c'est très similaire aux variables à la seule différence qu'au lieu d'une seule valeur, on inclut cette fois-ci des styles complet. Un exemple de cette technique :
.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px)
{
border: @width solid @color;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Cela peut être utilisé de la façon suivante :
.moduletable {
.thinborder(2px,#336699);
}
Comme vous l'aurez remarqué, vous pouvez modifier n'importe quel paramètre. Un paramètre non défini utilisera sa valeur par défaut (dans l'exemple précédent, la largeur est de 1px par défaut). Encore une fois, c'est une façon de mieux utiliser la feuille de style en évitant un nombre important de ligne de code en plus. En changeant simplement le style par défaut, cela mettra à jour toutes les lignes correspondantes à l'intérieur du fichier.
Les fonctions
La dernière chose à voir est le système de fonction de LESS. Les fonctions LESS vous permettent de réaliser des opérations simples sur les variables. On peut ainsi faire des multiplications, divisions, additions et soustractions. C'est un moyen très simple de créer un style unique et de le réutiliser facilement dans la feuille de style en même temps que de manipuler les styles pour des situations particulière. Voici quelques exemples :
//Définition des variables
@borderwidth : 2px;
@background : #222222;
.moduletable {
background-color: (@background / 4);
border: (@borderwidth + 1) solid (@background * 2);
}
En créant ce style et en y ajoutant des fonctionnalités LESS pour des cas spécifiques, on peut rapidement créer des styles standardisés sur toute la feuille de style mais qui maintiennent tout de même des cas particuliers lorsque besoin est.
L'exemple au dessus présente le cas où la couleur par défaut du background a été défini et qu'ensuite cette couleur du background est utilisée pour créer des variations lorsque cela est nécessaire. Dans cet exemple précis, la couleur du background est utilisée pour créer des variations au niveau des couleurs des bordures et du background.
LESS est utilisé pour d'autres choses encore. Il n'est pas possible de tout présenter dans un seul et même article pour une question de taille. Nous verrons juste comment LESS peut être utilisé au sein d'un template Joomla!. Si vous avez des questions à propos de LESS, vous pouvez visiter le site officiel : http://lesscss.org.
Comment LESS s'implémente avec les templates Joomla!
Joomla! 3 inclu une librairie JUI dans le répertoire root. Ce répertoire contient tous les fichiers de base nécessaires à son utilisation. Les templates Joomla! peuvent ainsi utiliser ces fichiers en les important dans les fichiers spécifiques à LESS du template. L'exemple ci-dessous illustre une importation:
// CSS Reset
@import "../../../media/jui/less/reset.less";
// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";
// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";
La liste complète des importations de fichier est disponible ici :
http://jui.kyleledbetter.com/
Une fois les classes LESS importées dans le template et que vous avez ajouté vos propres styles LESS, vous pouvez compiler un seul fichier template.css pour contrôler entièrement votre site avec un style unifié. Pour compiler vos styles LESS, vous aurez besoin de lancer un compilateur pour générer le fichier CSS. Ne laissez pas l'idée de devoir compiler vous effrayer. C'est plutôt un terme utilisé pour définir le processus d'écriture des fichiers CSS à partir des fichiers LESS (rappelez-vous que les variables, les mixins et les fonctions doivent être interprétés puis réécrits comme un fichier CSS normal).
Les templates par défaut de Joomla! utilisent une application qui génèrent leur CSS et le code est disponible en copie et pour une utilisation dans des styles de templates personnels depuis le répertoire GitHub pour le CMS Joomla!
https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php
Ce fichier contient une seule fonction doExecute qui, lorsqu'elle est lancée, écrit les fichiers CSS en se basant sur une classe standard Joomla! (JLess). Lancez-la, générez votre CSS et votre toute nouvelle feuille de calcul est alors prête.
En conclusion
Ne pensez pas que ce processus est trop technique. Il est très facile à comprendre et vous serez surpris avec quelle facilité on peut l'implémenter. Commencez dès aujourd'hui à écrire des fichiers LESS. Consultez le répertoire root de JUI / LESS et écrivez votre prochain template avec toute la force de LESS.
Articles qui devraient vous intéresser
Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
Réussir votre entreprise sur Internet grâce à Joomla
