[Framework] Nouvelle grille CSS

Bonjour à tous,

Dans le cadre de mon travail nous avons encore beaucoup de clients qui souhaitent avoir des sites RWD tout en étant compatibles avec IE9, voir IE8. Résultat : impossible d'utiliser Flexbox pour la mise en page

Nous avons donc travaillé jusqu'à maintenant avec différentes grilles CSS mais aucune ne correspondaient vraiment à nos attentes car elles utilisaient toutes un display inline-block ou des éléments flottants pour former les colonnes (voir le très bon billet de Raphaël à ce sujet). Le problème c'est que nous avons très souvent des designs à réaliser avec des blocs de même hauteur et aussi des alignements verticaux (sans compter les problèmes de marges négatives de ces grilles). Du coup on passe la plupart du temps à utiliser directement un display de type table plutôt que la grille d'un framework.

J'ai commencé il y a quelques jours à regarder si certaines grilles étaient basées sur un display table, mais je n'ai rien trouvé de vraiment concluant. Du coup j'ai décidé de commencer à faire mon propre framework de grille

Le résultat est ici : http://lmaze.github.io/amazing-css-table-grid/.
Et le GitHub qui va avec : https://github.com/lmaze/amazing-css-table-grid.

J'ai essayé de produire quelque chose de complet avec une version basique, une version utilisable via un post-processeur (comme le génial Pleeease), et une version entièrement paramétrable via Sass. Les fonctionnalités sont aussi assez nombreuses et je pense pas trop avoir à rougir par rapport à la grille de Foundation & co. On a commencé à l'éprouver un peu au travail et pour l'instant ça marche vraiment pas mal !

En fait ça m'étonne de ne pas encore avoir vu un framework digne de ce nom utiliser cette technique pourtant assez vieille maintenant. Je me disais que j'avais peut-être raté quelque chose ou que je n'avais pas bien pensé à certaines limitations qui auraient expliqué pourquoi cette technique n'avait pas été beaucoup utilisée.

Du coup j'aimerais vraiment avoir vos retours pour savoir ce que vous en pensez.

Merci d'avance pour toutes les remarques que vous pourrez me faire !

Salut,

j'aime bien ce genre d'outils simple. Par contre je vois 2 défauts :

- on ne peut pas appliquer de margin entre les différentes colonnes sans ajout de balises supplémentaires à l'intérieur de celles-ci
- on est obligé d'imbriquer les colonnes dans des rows

Après il faudrait tester, c'est ce qui me vient à l'esprit et ta grille a d'autres avantages.
Modifié par bzh (26 Mar 2015 - 00:50)

Salut bzh !

Merci pour tes retours, c’est chouette d’avoir un œil et un avis extérieur

- Pour les margins sur les colonnes c’est vrai que je n’y avais pas pensé. C’est toujours possible de mettre un padding à la place mais je comprends que ça peut gêner les fans de margins. En tout cas je vais essayer de rajouter des précisions dans ma doc suite à ta remarque.
- Pour l’imbrication des colonnes dans les rows ça ne me pose pas trop de problème vu que la majorité des systèmes de grille CSS semblent avoir le même fonctionnement (j'ai pas le souvenir d'en avoir vu sans).

- C'est pas faux pour les rows, sur bootstrap ça marcherait mais ce serait pas exactement calé à cause des margin négatifs appliqués aux row.

Sinon, j'aime bien l'idée de pouvoir rajouter des gutters mais je trouve que ce qui manque aux grilles en général c'est la possibilité de faire varier leur taille pour, en somme, ne plus suivre la grille. J'aimerai pouvoir écrire : "je veux 3 colonnes séparées de 50 pixels" par exemple.

Et un truc qui va pas par rapport à tes gouttières c'est que le contenu de tes div n'aura plus une taille égale, la première étant légèrement plus grande que les 2 autres.

- Bien vu pour la 1ère colonne qui n'a pas exactement la même taille que les autres quand des gouttières sont appliquées, j'avais raté ça ! Il va falloir que je corrige ça, probablement avec des marges négatives que je cherchais justement à éviter
- Pour faire varier les tailles des gouttières c'est vrai que ça pourrait servir (je me rappelle avoir déjà eu le cas aussi). Je pourrais peut-être prévoir une classe CSS "multiplicatrice", comme "gutters-x2", "gutters-x3", etc. qui multiplierait la taille d'origine de la gouttière par 2, 3, etc.

Je vais essayer de corriger tout ça ce week-end si je trouve un peu de temps

a écrit :
Dans le cadre de mon travail nous avons encore beaucoup de clients qui souhaitent avoir des sites RWD tout en étant compatibles avec IE9, voir IE8. Résultat : impossible d'utiliser Flexbox pour la mise en page Smiley bawling

J'ai du mal à comprendre le rapport entre les deux, le responsive design ne pose aucun soucis pour la compatibilité <IE10, la veuille ne sera simplement pas prise en compte.

De plus, les frameworks pour la mise en page ont rarement le moindre intérêt. D'abord parce que ce n'est pas en utilisant ce genre de gadget que l'on acquière une expertise en CSS, ensuite parce qu'une fois cette expertise acquise, ça ne fait pas gagner de temps.

display: flex; n'est pas compatible sur les versions inférieures à ie10

Pour le reste c'est ton avis, pas très étayé, avec lequel je ne suis pas du tout d'accord décrété comme ça.
Modifié par bzh (27 Mar 2015 - 15:42)

J’ai fait une nouvelle version en refondant complètement le système de gouttières.
Maintenant elles sont normalement correctes mais j’ai dû utiliser un conteneur supplémentaire et des marges négatives Du coup mon approche montre ses limites dès qu’on ajoute des gouttières…

@John-Rimbaud : Merci pour le troll