28172 sujets

CSS et mise en forme, CSS3

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.
<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 Smiley cligne

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)
Aucune réaction ?
J’espère avoir posté dans la bonne section.

Merci d'avance pour vos remarques.
Bah moi je trouve ça assez sympa, j'ai pas trop fouillé au niveau du code mais bon. Après, ce n'est pas trop mon genre, je n'utilise ni frameworks, ni grilles, ni quoi que ce soit ... que du CSS pur et dur fait maison Smiley lol
J'étais aussi un peu contre tout ces outils CSS et c'est vrai que la majorité des frameworks sont assez lourd. Pour la grille c'est un peu différent car au final on fini souvent par faire une pseudo grille. Ici Laticss ne fait que 4Ko quand il est minimifié, je pense que c'est acceptable Smiley cligne (et si c'est trop il y a toujours http://www.vcarrer.com/2009/06/1-line-css-grid-framework.htm )