Documentation française sur le framework Gantry

LESS CSS

LESS est un langage dynamique de feuilles de style qui améliore le CSS avec des comportements dynamiques tels que des variables, des mixins, des opérations et des fonctions. LESS permet que votre code soit plus propre, optimisé tout en réduisant également la durée globale pour créer et maintenir votre base de code.

Gantry prend en charge LESS, en implantant le compilateur et les processus de base dans le Framework lui-même. En outre, les templates administration et frontend sont construits avec des fichiers LESS qui sont alors envoyés comme des fichiers CSS vers le navigateur. Gantry gère tout le traitement complexe, de sorte que vous puissiez vous concentrer uniquement sur le style.

Remarque, lors des modifications, n'oubliez pas de:

  1. Modifier toujours le fichier .less et non pas les fichiers compiled .css qui sont rendus dans le dossier /css-compiled/
  2. Vous assurer que les dossiers du template /less/, /css/, et /css-compiled/ sont inscriptibles
  3. Nettoyer les caches de Less, Gantry et du navigateur

LESS: l'essentiel

LESS est conçu pour améliorer le CSS, ainsi vous débutez selon les principes de base et les attributs qui sont associés au CSS, IDs, classes et tous les autres. Par conséquent, le format vous semblera familier. En termes d'exemples, les fichiers /LESS seront présentés d'abord, suivis par les fichiers Compiled CSS qui sont les fichiers de sortie qui apparaissent dans le répertoire /css-compiled/ .

Variables

Ce sont des valeurs standards qui peuvent être répétés tout au long de vos feuilles de style, et ainsi, un changement de ligne va générer un changement global, plutôt que d'avoir à changer manuellement chaque instance. Un exemple à partir du template Gantry est ci-dessous:

    //LESS
    @bodytitle: #303030;
    ...
    a:hover {
    color: @bodytitle;
    }
    h1, h2, h3, h4, h5, h6 {
    color: @bodytitle;
    }
    /* Compiled CSS */
    a:hover {
    color: #303030;
    }
    h1, h2, h3, h4, h5, h6 {
    color: #303030;
    }

Comme vous pouvez le voir dans l'exemple ci-dessus, n'importe où @bodytitle est utilisé dans les fichiers LESS, il sera remplacé par #303030 dans le compilateur.

Mixins

Mixins combine des Variables avec des Fonctions en vous permettant d'inclure toutes les propriétés associées à une classe dans une autre. Ces injections de classe peuvent inclure des fonctions, comme le montre l'exemple issu de LessCSS.org ci-dessous:

    //LESS
    .rounded.corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    }
    #header {
    .rounded.corners;
    }
    #footer {
    .rounded.corners(10px);
    }
    /* Compiled CSS */
    #header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

Règles imbriquées

Les Règles imbriquées servent à l'héritage, ce qui permet à vos feuilles de style d'être plus propres et plus courtes en plaçant des groupes de sélection les unes dans les autres, plutôt que de spécifier chaque instanciation à chaque fois. Voir un exemple de template Gantry ci-dessous:

    //LESS
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    ul {
    list-style: none;
    }
    li {
    margin-bottom: 8px;
    a, .item, .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }
    }
    }
    /* Compiled CSS */
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul.menu ul {
    list-style: none;
    }
    ul.menu li {
    margin-bottom: 8px;
    }
    ul.menu li a, ul.menu li .item, ul.menu li .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }

Fonctions & Opérations

Les Fonctions & Operations vous permettent d'effectuer des opérations mathématiques sur les valeurs de CSS aussi bien que de manipuler ces valeurs par des fonctions, comme c'est possible avec JavaScript. Voyez l'exemple ci dessous tiré de LessCSS.org:

    //LESS
    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
    }
    #footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
    }
    /* Compiled CSS */
    #header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
    }
    #footer {
    color: #114411;
    border-color: #7d2717;
    }

Le schéma ci-dessus est là pour vous présenter les notions de bases de LESS. Pour une présentation plus détaillée du fonctionnement des variables, mixins, fonctions et opérations, veuillez visiter :LessCSS.org.

LESS dans le Template Gantry

Tous les fichiers LESS associés au template sont situés dans le répertoire /templates/[TEMPLATE]/less/ . Gantry 4 utilise un puissant compilateur LESS basé sur du PHP produit par lessphp. Gantry 4 délivre les fichiers LESS transformés dans le répertoire /templates/[TEMPLATE]/css-compiled/ .

Tous les fichiers CSS ne sont pas compilés en un seul fichier. Tout fichier CSS qui doit être autonome, pour l'application de paramètres de template (comme le chargement de Fusion Menu à la place de SplitMenu) sera indépendant du fichier principal /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE].

Comment sont compilés les fichiers LESS?

Quand un changement est repéré, Gantry recompile automagiquement vos fichiers LESS dans des fichiers CSS. Pour ajouter un fichier LESS, vous avez deux options. Vous pouvez insérer la fonction suivante dans votre code PHP:

$gantry->addLess('NAME.less');

Où NAME.less est le nom de votre fichier less dans le répertoire /templates/[TEMPLATE]/less/. La méthode addLess() accepte plusieurs paramètres facultatifs:

public function addLess([INPUT_LESSFILE], [OUTPUT_CSSFILE], [PRIORITY], [ARRAY_OF_VARIABLES]);

Un exemple de ceci tel qu'utilisé dans le Template Gantry par défaut est :

$gantry->addLess('global.less', $gantry->templateName . '-compiled.css', 8, array('headerstyle'=>'"header-'.$gantry->get('headerstyle','dark').'.less"'));

Vous pouvez voir dans cet exemple que global.less est le fichier source LESS, et ce qui sera produit sera gantry-compiled.css. La priorité a été monté dans le code à 8, et le dernier paramètre est un tableau d'un seul élément headerstyle passé par la compilation LESS. La possibilité de passer des variables rend la compilation LESS très puissante et flexible.

Lorsque vous passez des variables par la compilation LESS votre sortie aura comme format [TEMPLATE]-compiled-[MD5_VARIALBLE_NAME_VALUES], par exemple: gantry-compiled-845729384248h3hf4haeioh.css.

Une autre façon d'ajouter des fichiers LESS est tout simplement de créer le fichier puis ajoutez une référence dans le fichier LESS principal /less/global.less. Le fichier global.less importe les autres fichiers LESS via la fonction @import , voyez l'exemple ci-dessous:

    // Core variables and mixins
    @import "variables.less";
    @import "mixins/index.less";
    // Core and Grid
    @import "gantry-core.less";
    @import "joomla-core.less";
    // Template core styling and layout
    @import "template.less";
    @import "style.less";
    @import @headerstyle;
    @import "prettify.less";

En outre, pour les caractéristiques qui exigent un fichier LESS distinct, vous pouvez employer un grand choix de différentes techniques. La plus simple est d'insérer la fonction add LESS dans /features/styledeclaration.php, comme indiqué dans l'exemple du Template Gantry:

if ($gantry->get('typography-enabled')) $gantry->addLess('typography.less');

Cela ajoute une condition, là où le paramètre typography-enabled est actif, le fichier /less/typography.less sera compilé

Options LESS duTemplate

Vous pouvez commander la compression des CSS, le temps d'attente de la compilation et l'entête de débuggage, ainsi que vider manuellement le cache avec le bouton Clear Cache dans Extensions → Template Manager → gantry → Advanced → Less Compiler.

En outre, la compression CSS augmente les performances du site et l'optimisation en consolidant toutes les CSS en un seul fichier, avec peu ou aucun espace vide. Cela réduit la taille du fichier CSS et le rend plus rapide au chargement dans le navigateur.

advanced-less

Fichiers LESS Personnalisés

Souvent, vous aurez besoin d'ajouter un peu de CSS personnalisé pour remplacer un style particulier dans le template. Vous pourriez vouloir ne pas modifier les fichiers LESS et CSS fournis parce que cela pourrait  occasionner des problèmes au moment de  la mise à jour du template. Avec Gantry 4, vous pouvez créer des fichiers LESS personnalisés de la forme : /less/[LESS_FILE_NAME]-custom.less, et ceux-ci seront repris et compilés dans le fichier CSS principal.

Par exemple, dans le template Gantry par défaut, il ya un fichier appelé less/template.less. Si vous créez un nouveau fichier appelé less/template-custom.less, vous pouvez ajouter vos propres éléments LESS personnalisés ici et ils seraient automatiquement ajoutés à votre fichier CSS compilé.