Bonjour à toutes et à tous !
Cela fait depuis maintenant un bon petit moment que je fais du CSS et j'ai découvert les frameworks CSS plus récemment (de près ou de loin : Skeleton, Bootstrap, Fondation et dernièrement KNACSS).
Bref, trop de frameworks tuent les frameworks mais j'ai quand même décidé d'en faire un, juste une "grille".
Alors pourquoi ? Simplement car les frameworks (que je connais en tout cas) on toujours un nombre fixe de colonnes. Alors oui, on peut parfois les customiser ou utiliser des préprocesseurs (less, sass, ...) mais ça demande du javascript et c'est pas forcément la meilleure solution à mon humble avis.
Mon idée est de choisir pour chaque rangée un diviseur.
Je m'explique; si on utilise une grille avec 12 colonnes et que l'on veut faire 3 colonnes il faudra utiliser, pour nos 3 div, 4 colonnes de la grille (span4 dans bootstrap).
Ici l'idée serait de ne pas se laisser dicter par le nombre de colonnes mais plutôt choisir soit même. Si je veux mes 3 colonnes je créer ma rangée et je la divise par 3, simplement (<div class="row div3">...</div>). Après on utilise une colonne a chaque fois (... class="use1" ...).
Ainsi on peut choisir une division différente sans problème pour chaque rangée.
On peut aussi diviser une rangée en rangées (ce qui fait une infinité de possibilités).
Par exemple ici on divise en 5 et on créer une colonne de 1, une de 3 et une de 1.
Pour un exemple plus complet avec des divisions de divisions : http://dabblet.com/gist/3993884
Tout ce trouve ici (exemples et code) : http://bafs.github.com/Laticss/
Je n'ai pas encore publié la grille avec les media queries pour une grille responsive mais si vos retours sont concluants je m'empresserai de le faire
Merci d'avance pour vos avis et critiques !
PS: Pour le nom c'est un mélange de Latitude, CSS et Lattice.
Modifié par BafS (01 Nov 2012 - 15:44)
Cela fait depuis maintenant un bon petit moment que je fais du CSS et j'ai découvert les frameworks CSS plus récemment (de près ou de loin : Skeleton, Bootstrap, Fondation et dernièrement KNACSS).
Bref, trop de frameworks tuent les frameworks mais j'ai quand même décidé d'en faire un, juste une "grille".
Alors pourquoi ? Simplement car les frameworks (que je connais en tout cas) on toujours un nombre fixe de colonnes. Alors oui, on peut parfois les customiser ou utiliser des préprocesseurs (less, sass, ...) mais ça demande du javascript et c'est pas forcément la meilleure solution à mon humble avis.
Mon idée est de choisir pour chaque rangée un diviseur.
Je m'explique; si on utilise une grille avec 12 colonnes et que l'on veut faire 3 colonnes il faudra utiliser, pour nos 3 div, 4 colonnes de la grille (span4 dans bootstrap).
Ici l'idée serait de ne pas se laisser dicter par le nombre de colonnes mais plutôt choisir soit même. Si je veux mes 3 colonnes je créer ma rangée et je la divise par 3, simplement (<div class="row div3">...</div>). Après on utilise une colonne a chaque fois (... class="use1" ...).
Ainsi on peut choisir une division différente sans problème pour chaque rangée.
On peut aussi diviser une rangée en rangées (ce qui fait une infinité de possibilités).
Par exemple ici on divise en 5 et on créer une colonne de 1, une de 3 et une de 1.
<div class="row div5">
<div class="use">
<p>Je suis une colonne</p>
</div>
<div class="use3">
<p>Je suis 3 colonnes</p>
</div>
<div class="use">
<p>Et moi la dernière</p>
</div>
</div>
Pour un exemple plus complet avec des divisions de divisions : http://dabblet.com/gist/3993884
Tout ce trouve ici (exemples et code) : http://bafs.github.com/Laticss/
Je n'ai pas encore publié la grille avec les media queries pour une grille responsive mais si vos retours sont concluants je m'empresserai de le faire
Merci d'avance pour vos avis et critiques !
PS: Pour le nom c'est un mélange de Latitude, CSS et Lattice.
Modifié par BafS (01 Nov 2012 - 15:44)