
J’utilise depuis quelque temps pour le création de sites un générateur de grilles. Pour faire simple, j’utilise un service web sur lequel je règle les paramètres de ma grille et le site génère un fichier zip contenant :
- un fichier html contenant quelques balises <div> à titre d’exemple
<div class="container clearfix"> <div class="grid_12"> <h1>12</h1> </div>
/*
& Columns : 12
& Gutter %: 20%
& MinWidth: 960px
& MaxWidth: 1080px
*/
.grid_1 { width: 6.6666666666667%; }
.grid_2 { width: 15%; }
.grid_3 { width: 23.333333333333%; }
Oui, je sais l’arrondi à la 13e décimale pour la largeur, ce n’est pas ce que l’on a fait de plus élégant.
Ces colonnes sont tout de suite utilisables, il suffit d’attribuer une classe aux balises <div>, par exemple grid_12 (pour avoir une largeur équivalente à 12 colonnes).
Ce générateur de grille, Tiny Fluid Grid est inspiré du fameux 1kb CSS grid. Mais Tiny Fluid Grid a l’avantage de proposer l’option largeur minimum et maximum ainsi qu’une prévisualisation de rendu de la grille.




26 juillet 2011



