Mise en page

Pour permettre une mise en page plus poussé, on va utilisé un nouveau système. Ce système fonction sur la base de phrases, qui seront ensuite transformer en div imbriquer.

exemple de phrase : A/[B/CDE/FGH]--I
résultat : Le thème Noviny (en gros)

d'autres exemple plus bas.

Il manque juste une interface js pour faire le boulot.

Prenons un exemple simple

Vous voulez divisez votre espace en deux colonnes de taille identique.

La phrase sera tous simplement :

AB

Le plugin comprend qu'il faut créer deux colonnes, de taille identique.

Le code html :

<div class="layout layout-A" style="float: left; width: 50%;"></div>
<div class="layout layout-B" style="float: left; width: 50%;"></div>
<hr style="clear: both; visibility: hidden;"/>

Deuxième exemple

La Première colonne doit être deux fois plus grande que la deuxième. On peut l'écrire de deux manières différentes.

AAB ou A-B

Dans ce cas le plugin comprend qu'il faut réservé deux fois plus de place a la première colonne.
Le code html :

<div class="layout layout-A" style="float: left; width: 66.6666%;"></div>
<div class="layout layout-B" style="float: left; width: 33.3333%;"></div>
<hr style="clear: both; visibility: hidden;"/>

Troisième exemple

La Première colonne doit être trois fois plus grande que la deuxième. Et on ajoute une deuxième ligne, qui elle sera divisé en trois colonne de taille égale.

A--B/CDE ou AAAB/CDE

Le / permet de créer une nouvelle ligne.
Le code html :

<div class="layout layout-A" style="float: left; width: 75%;"></div>
<div class="layout layout-B" style="float: left; width: 25%;"></div>
<hr style="clear: both; visibility: hidden;"/>
<div class="layout layout-C" style="float: left; width: 33.3333%;"></div>
<div class="layout layout-D" style="float: left; width: 33.3333%;"></div>
<div class="layout layout-E" style="float: left; width: 33.3333%;"></div>
<hr style="clear: both; visibility: hidden;"/>

Plus Dur

On divise une première fois l'espace en deux, la deuxième colonne on la divise dans la hauteur. L'image est plus parlante.

A[B/C]-

Les crochets représente une colonne, a l'intérieur B/C divise la colonne en deux lignes.
Le code html :

<div class="layout layout-A" style="float: left; width: 33.3333%;"></div>
<div class="layout layout-B/C" style="float: left; width: 66.6666%;">
    <div class="layout layout-B" style="float: left; width: 100%;"></div>
    <div class="layout layout-C" style="float: left; width: 100%;"></div>
    <hr style="clear: both; visibility: hidden;"/>
</div>
<hr style="clear: both; visibility: hidden;"/>

Exercice

Le thème  Noviny
A/[B/CDE/FGH]--I