Le grid layout, permet de définir la largeur des éléments sur la page. La grille découpe la page en 12 morceaux chacun représente 8.33%.
Il y a quatre types de tailles, à savoir:

• tm: tiny media (-480px)
• sm: small media (+480px et -720px)
• mm: medium media (+720px et -992px)
• lm: large media (+992px)

Afin de définir un type de grille pour l'une des quatre tailles il suffit de créer une classe contenant après "grid" le nom du média. Par exemple, afin d'afficher deux éléments l'un de taille 11 et l'autre 1 uniquement pour les petits (small) médias: lf-grid-sm-1-11 et afin de changer cette disposition lorsque l'on affiche sur des médias moyens (medium) afin d'avoir deux largeur identique: lf-grid-mm-6a.

Si aucune taille de média n'est définie, la grille s'appliquera sur tous les médias exemple lf-grid-12a affichera tous les éléments enfants avec une largeur de 100%.

Classes parentes

• .lf-grid - classe par défaut permettant d'espacer les éléments
• .lf-grid-no - classe permettant de coller les éléments entre eux

1 colonne

Il est également possible d'utiliser les classes suivantes afin de générer les grilles. Elle se place sur l'élément parent portant la classe .lf-grid ou .lf-grid-no

Les classes sont composées des références de la grille des deux éléments séparés par un tiret.

2 colonnes

3 colonnes

À partir de 3 colonnes et afin de ne pas écrire la valeur de chaque grille, les helpers de colonne se composent différement. L'on indique le nombre de fois que la grid est représentée par exemple si l'on a 3 colonnes de 4 cela donnera 3x4 soit nombre multiplié par la représentation numérique dans la grille.

4 colonnes

5 colonnes

Plusieurs niveaux

Il est également possible d'imbriquer les éléments les uns dans les autres, pour ce faire il faut utiliser la classe .lf-grid-nested. Dans l'exemple on s'arrête à deux niveaux mais on peut aller aussi loin que possible.

Espacement avant

Combiner avec les autres classes cet élément permet d'utiliser les éléments de la grille avec un esapcement d'une ou plusieurs cases de la grille.

Cette section liste toutes les classes CSS pouvant être utlisées pour l'affichage.

Couleurs

Texte

Table

• .lf-tbl-center(permet d'aligner horizontalement et verticalement un enfant)

No

• .lf-no-border(permet de supprimer les bordures d'un élément)
• .lf-no-scroll(permet de supprimer la possbilité de scroller)

Autres

• .lf-wrapper(fixe l'élément à 100% de largeur et d'hauteur relative et devient la référence (position: relative))
• .lf-full-content(fixe l'élément à 100% de largeur et d'hauteur relative)
• .lf-full-width(fixe l'élément à 100% de largeur relative)
• .lf-float-right(rend l'élément floattant à droite)
• .lf-float-left(rend l'élément floattant à gauche)
• .lf-cursor-default(met l'apparence du curseur par défaut)
• .lf-force-hidden(permet de forcer l'élément en display block)