Cette section détaille le fonctionnement des colonnes, permettant d'organiser le contenu d'une page en plusieurs colonnes.
Unité de largeur
Afin de définir les largeurs de colonnes, on divise la zone de contenu selon
12 unités de taille.
On peut ensuite définir la largeur d'une colonne en
nombre d'unités.
4 largeurs sont ainsi définies :
- 2 unités
- 3 unités
- 4 unités
- 6 unités
Pour découper un contenu en colonnes de taille identiques, on indiquera simplement le nombre d'unités adéquat :
On peut tout à fait combiner plusieurs colonnes de largeurs différentes en respectant le total de 12 unités.
Syntaxe
Les colonnes sont regroupés au sein d'une
ligne. Chaque
ligne se trouve l'une après l'autre.
On utilise le snippet
Ligne et
Ligne-Fin pour délimiter le début et la fin d'une ligne (un
snippet est une commande entourée par les caractères
{s: et
}).
{s:Ligne}
...
{s:Ligne-Fin}
On définit ensuite chaque colonne à l'aide du snippet
Col et
Col-Fin prenant en paramètre le nombre d'unités.
{s:Ligne}
{s:Col|6}
6 unités
{s:Col-Fin}
{s:Col|6}
6 unités
{s:Col-Fin}
{s:Ligne-Fin}
Pour obtenir le découpage suivant :
Le nombre d'unités est indiqué à la suite du nom du snippet
Col, en utilisant le caractère
| puis le nombre d'unités.
{s:Col|6} = 6 unités
{s:Col|4} = 4 unités
{s:Col|3} = 3 unités
{s:Col|2} = 2 unités
Note. Il est important d'inclure les snippets
Ligne-Fin et
Col-Fin après chaque ligne/colonne pour ne pas casser la mise en page du site.
Avancé
Paramètres CSS Ligne. Le snippet
Ligne accepte deux paramètres supplémentaires permettant d'inclure des classes et des styles css additionnels dans le
<div>. Le premier paramètre permet d'ajouter des classes css, le second d'inclure des styles. Exemple :
Ligne|presentation arrondi ombre|font-weight:bold pour inclure les classes css
presentation arrondi ombre et le style css
font-weight:bold sur toute la ligne.
Paramètres CSS Colonnes. Le snippet
Col accepte deux autres paramètres permettant d'inclure des classes et des styles css additionnels dans le
<div>. Exemple :
Col|4|rouge|font-weight:bold pour inclure la classe css
rouge et le style css
font-weight:bold sur la colonne ;
Col|3||color:red pour inclure uniquement le style css
color:redsur la colonne.