57 lines
1.7 KiB
Plaintext
57 lines
1.7 KiB
Plaintext
<page xmlns="http://projectmallard.org/1.0/"
|
||
type="topic" id="misc-grid" xml:lang="fr">
|
||
|
||
<info>
|
||
<revision docversion="0.1" date="2016-05-14" status="draft"/>
|
||
<credit type="author">
|
||
<name>Frédéric Péters</name>
|
||
<email>fpeters@entrouvert.com</email>
|
||
</credit>
|
||
|
||
</info>
|
||
|
||
<title>Système de grille CSS</title>
|
||
|
||
<p>
|
||
Un système de grille adaptive sur douze colonnes est proposé pour le
|
||
formatage des formulaires.
|
||
</p>
|
||
|
||
<figure>
|
||
<title>Système de grille</title>
|
||
<media type="image" mime="image/png" src="figures/grid.png"/>
|
||
</figure>
|
||
|
||
<p>
|
||
Chaque classe CSS pour un élément de la grille est décrit numériquement
|
||
par sa largeur. Par exemple, <code>grid-1-2</code> pour un élément
|
||
faisant la moitié de la largeur, <code>grid-2-3</code> pour un élément
|
||
en faisant les deux-tiers. Les dénominateurs possibles sont 2, 3, 4, 6
|
||
et 12.
|
||
</p>
|
||
|
||
<note>
|
||
<p>
|
||
Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
|
||
ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
|
||
par exemple un élément configuré pour une largeur d’un quart d’écran prendra
|
||
non pas un quart d’écran mais un demi écran.
|
||
</p>
|
||
|
||
<p>
|
||
Sur les très petits écrans, la mécanique de grille est totalement annulée et
|
||
tous les éléments de grille sont affichés sur toute la largeur disponible.
|
||
Il est cependant possible d’empêcher ce comportement en accompagnant la classe
|
||
<code>grid-x-y</code> de la classe <code>never-alone</code>.
|
||
</p>
|
||
</note>
|
||
|
||
<p>
|
||
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
|
||
quand les éléments d’une ligne n’ont pas tous la même hauteur, une classe
|
||
supplémentaire, <code>newline</code> peut être posée sur le premier
|
||
élément de la nouvelle ligne.
|
||
</p>
|
||
|
||
</page>
|