Framework CSS — mettez vos grilles au pas !

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Framework CSS — mettez vos grilles au pas !

Je suis encore tout esbaudis par la découverte de 45+ frameworks CSS que tout webdesigner devrait connaitre qui liste une palanquée de bibliothèques CSS et d’outils pour générer des grilles de mise en page sans douleur. Je ne reviendrais pas sur les avantages ou les inconvénients des frameworks CSS ni sur le choix du meilleur d’entre eux. Vous trouverez des éléments de réponse  dans : Frameworks CSS + Reset CSS : design from scratch paru initialement en anglais sur Smashing Magazine ; dans Développement efficace avec les frameworks CSS et Blueprint ; ou encore dans Blueprint, un framework pour webdesigner. Oui, beaucoup de Blueprint car c’est le seul que j’ai vraiment utilisé jusqu’à présent.

Ah bon, y a des gens qui travaillent sans grille ?

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale.

Travailler avec une grille de mise en pages est très courant dans le print : j’ai pris l’habitude de travailler en fonction d’un format de papier, de marges, de colonnes et de gouttières ainsi qu’avec l’option Aligner sur la grille du logiciel QuarkXPress.

Pour beaucoup de webdesigners en revanche, les grilles semblent vécues comme une contrainte au lieu de servir de guide. Comme le dit si bien André Gide, l’art nait de contraintes, vit de luttes et meurt de liberté. Ce qu’on pourrait traduire librement par : sans contrainte, l’art n’est rien ou encore par trop de liberté, nuit.

Votre grille, vous la prenez en entrée ou au dessert ?

Faut-il pour autant commencer la conception du design avec une grille devant les yeux ? Je ne le pense pas. Les premières recherches graphiques et les premiers placements de blocs devraient s’effectuer librement, à l’instint. C’est lorsque le résultat ressemble à quelque chose, qu’il est temps de déterminer le « pas » de la grille.

Pour des raisons de simplification et d’arrondi, la plupart des frameworks CSS proposent des grilles se limitant à des largeurs de 960 ou 950 pixels en 12, 16 ou 24 colonnes. Dans ces conditions, il est probable que le plus petit élément de ces grilles ne conviendront pas à vos besoins.

Pour définir une grille qui sorte des sentiers battus, il faut rassembler le maximum d’information sur votre contenu et le temps que vous êtes prêt à passer pour le préparer. Par exemple, si vous voulez afficher rapidement des vidéos Youtube dans votre sidebar, assurez-vous que sa largeur soit au moins égale à la largeur par défaut des vidéos, soit 425 pixels ! C’est pareil pour tout les éléments qui possèdent une taille fixée à l’avance, comme les Gravatars, les présentations Slideshare, les publicités, etc.

Pas besoin de framework pour travailler avec une grille

Et oui, il n’est pas nécessaire d’utiliser un framework CSS pour profiter des avantages qu’il procure. Dès que vous aurez déterminé le nombre de colonnes et la largeur de la gouttière en fonction de la largeur totale de votre design, vous aurez fait la moitié du chemin. L’autre moitié est composée du choix des balises HTML pour le contenu et le placement des blocs principaux (content, sidebars, header, footer, etc.).

Factoriser les déclarations CSS avec des classes plus ou moins sémantiques dans le code HTML ou multiplier les float:left et autres margin-right n’est pas le plus important et en ce qui concerne la partie purement layout. Il y a rarement des pixels à gagner avec l’une ou l’autre des solutions car  les octets économisés par la factorisation sont souvent dépensés par les span-x et autres append-x ou prepend-x inutilisés : toutes les combinaisons d’une grille ne sont pas de la partie, et heureusement !

Ne vous faites pas griller…

Les frameworks, c’est de la balle, mais il est important de s’éloigner des formats proposés pour suivre sa propre voie car si les solutions proposées par Blueprint ou 960.gs et consorts peuvent généralement prétendre au statut de standard, le risque est justement de standardiser sa production graphique pour la faire entrer dans le moule ! Gardez à l’esprit qu’une différence — même minime — dans les proportions d’un design peuvent changer radicalement la perception qu’on peut en avoir.

Ne vous laissez pas faire, mettez-moi ces grilles au pas ;)

  • blueprint — Fournit des fondations solides pour vos projets grâce à une grille facile à utiliser, une typographie fine, des goodies utiles et même une feuille de style pour l’impression.
  • 960.gs — Ce système de grille est conçu pour fluidifier votre  chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12 et 16 colonnes pouvant être utilisés séparément ou ensemble.
  • tripoli — Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Excellente alternative aux full Framework si vous faites vous-même votre grille de mise en page.
  • yaml — « Yet Another Multicolumn Layout » est un framework (x)html/css pour la création de maquettes flexibles.
  • bluetrip — le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System.
  • typogridphy — Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.
  • yui grids — Offre un jeu prédéfinit de largeur de page comprenant 6 templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1000 combinaisons de maquette pour seulement 4kb.
  • elasticss — Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions, et se distingue des autres par sa capacité à produire des design fixes, liquides ou élastiques très facilement.
  • sencss — Un frameword « zen » qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs avec une grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.
  • the golden grid — Ce système de grille est le fruit d’une recherche constante de la grille parfaite, et rien de tel que le nombre d’Or pour se rapprocher des dieux !
  • css-boilerplate — Par l’un des  créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser { float: left; width: 240px; margin-right: 110px; } ou class= »column span-2 append-1″ !
  • BIC — Cf. BIC, un framework orienté couleur et typographie.
  • bungee — Bungee utilise une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Au niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.
  • sparkl — Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.
  • hartija — CSS Print Framework.
  • The 1Kb CSS Grid — Une grille minimaliste qui tient en une quinzaine de déclarations CSS. Idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement. Suggéré par Darklg)
  • 1 line CSS Grid Framework — Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration : .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?
  • malo — Du même auteur que le précédent et le suivant dont il est le petit frère, malo se distingue par sa légerté au service d’une grille en pourcentage
  • emastic — Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.
  • logicss — basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples, personnalisables à l’aide d’une boite à outils. Designs élastique en utilisant des EMs, liquide via les pourcentages ou fixe avec les pixels.
  • MyCSS Grid System — sytème de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.
  • wymstyle

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



34 commentaires pour “Framework CSS — mettez vos grilles au pas !”

  1. Val dit :

    Question idiote mais complémentaire. En terme de complexité, quel serait le plus simple d’utilisation et le plus rapide à prendre en main ? En clair, s’il ne fallait en retenir qu’un, ce serait lequel ?

  2. Bruno Bichet dit :

    j’ai bien envie de dire que ça dépend de ton niveau en css ;) En fait, le plus difficile à gérer dans les frameworks (et dans la mise en page en css) quand on débute, c’est la gestion des clear et des float. A cet égard, il faudrait faire un mix de « css-boilerplate » qui propose un rétablissement du flux sans marquage supplémentaire dans le code html et de « bluetrip » qui propose un système robuste de grille. Bref un Bluetriplate ^^

  3. Val dit :

    Merci. J’ai toujours bien ramé pour construire mes feuilles de style. Vais tenter ça

  4. VuThéara dit :

    J’ai testé Blueprint et 960 grids system sur mon blog. Et j’ai opté pour Blueprint qui est vraiment accessible, pas mal de documentation fourni sur Internet et une plus grosse communauté. Sinon ces deux frameworks css se démarquent bien des autres :)

  5. Syndrael dit :

    Sympa ce ptit billet, et assez exhaustif.. pour ma part je suis plutot Bluetrip, même si je regrette une trop petite communauté.. et des versions un peu vieillottes.. S.

  6. Thanh dit :

    Bonjour monsieur, votre blog est vraiment intéressant et votre billet va en aider plus d’un, dont moi. Mais pensez vous qu’on pourra se faire une bouffe prochainement avec par exemple Indica et cie?

    :D

  7. Nicolas F. dit :

    Je reste un partisan de la méthode manuelle. Surtout que parfois j’utilise des grille conventionnelles (genre 5px), mais pas exemple, récemment, j’ai essayé la grille de 3px.

    Sinon, les framework CSS, il contiennent tous du PHP ou équivalent ou il y en a sans ? Et, sont-ils lourds (je pense aux frameworks JS qui sont assez lourds) ?

    Bref, comme d’hab. j’attends qu’un d’entre eux sorte vraiment du lot avant de faire quoi que ce soit.

  8. Nicolas F. dit :

    Je parlais pas de la même chose… Là on parle de grille pour le positionnement, moi je parlais de guide sous forme de grille pour l’intégration. Une façon simple de faire un design harmonieux c’est d’utiliser des dimensions qui soient toujours multiples d’un nombre prédéterminé. Pour cela, j’utilise des grilles sous inkscape avec un pas spécial (5, 3 ou x px) comme ça, avec l’adhérence aux bord, je suis sûr que tous les éléments du site sont bien multiples du nombre choisi. Pour l’intégration CSS, je sais que certains affichent également ces grilles pendant le développement. Je pensais que tu te référait à ça.

  9. [...] Framework CSS — mettez vos grilles au pas ! Article très intéressant sur le webdesign via les grilles et les frameworks css (tags: css framework webdesign webdev layout grid design) [...]

  10. [...] reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue [...]

  11. [...] Framework CSS — mettez vos grilles au pas ! – [...]

  12. [...] Framework CSS — mettez vos grilles au pas !, [...]

  13. [...] Framework CSS — mettez vos grilles au pas !, [...]

  14. [...] Lien: http://css4design.com/framework-css-mettez-vos-grilles-au-pas 0 Comments Filed in css, design, framework   Posted by admin [...]

  15. [...] une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dans Framework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs [...]

  16. [...] réactualisée de celle que j’ai déjà publiée en juin 2009 à la fin de l’article Frameworks CSS, mettez vos grilles au pas !. Toute ressemblance avec des listes de frameworks CSS publiées ces derniers temps, bla bla [...]

  17. [...] Framework CSS — mettez vos grilles au pas ! [...]

  18. [...] Framework CSS — mettez vos grilles au pas ! Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale. [...] [...]

  19. pligg.com dit :

    Framework CSS — mettez vos grilles au pas !…

    Ensembles de feuilles de style de base pour faciliter la mise en forme des styles sur nos sites….

  20. [...] les premiers documents écrits sur le bois, le cuir, la pierre, l’argile, le papyrus, etc. Je me demande même s’il est possible de travailler sans grille… Comme le dit si bien André Gide, L’art nait de contraintes, vit de luttes et meurt de [...]

  21. Jeune gay dit :

    Moi j’ai opté pour formee il est super !!

  22. rezki dit :

    Une question. J’aime beaucoup ce site et j’aimerais savoir pourquoi il ne s’affiche pas correctement. Les titres se télescopent avec les paragraphes suivants. Je suis sous Firefox, Ubuntu Linux.

    • br1o dit :

      Merci ;) En ce qui concerne les titres, je n’ai pas ce problème sur Firefox Windows, et de mémoire, pas sur Firefox Ubuntu non plus. Ceci dit, j’ai déjà remarqué cet effet une ou deux fois, lorsque un titre était précédé par une balise pre, par exemple, mais c’est assez rare. Merci pour ta vigilance :-)

  23. [...] taper tout de zéro. Il a beau exister des CSS « Reset », des frameworks CSS, tout un tas de grilles prête à l’emploi, des composants de CSS réutilisables avec l’approche objet, je n’ai jamais réellement [...]

  24. [...] Framework CSS — mettez vos grilles au pas ! Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? [...]

  25. Bruno Bichet dit :

    Bonjour à vous également Monsieur Thanh, votre commentaire m’a ouvert l’appétit et je suis en mesure de répondre favorablement à votre proposition de « bouffe » avec les personnes de votre choix, et bien sûr, avec Indica et cie.

    :D

  26. Bruno Bichet dit :

    15 déclarations, c’est pas mal Je l’ai ajouté à la liste. Dans le même esprit, j’ai trouvé 1 line CSS Grid Framework qui tient en une seule déclaration :D

  27. Bruno Bichet dit :

    Je n’ai pas saisi à quoi tu faisais référence avec les grilles de 3px ou 5px, tu peux m’éclairer ? Sinon, les frameworks CSS ne contiennent pas de PHP et certains sont très légers, cf. celui qui tient en une seule déclaration CSS ;)

  28. Darklg dit :

    Huh ? C’est le même lien ?

  29. Bruno Bichet dit :

    lol, je m’est trompé ^_^v Trop de copié tue le collé, c’est corrigé

  30. Bruno Bichet dit :

    Je pense qu’il s’agit de la même chose, sauf que pour ma part je choisis des grilles assez larges de manière à limiter le nombre de possibilités de placement des blocs.

    Si besoin, je n’hésite pas à faire sortir certains éléments de la grille. Par exemple, une colonne de 46 pixels de large peut être divisée en 3×12 ou 12×3 ce qui peut être utile pour placer de nombreux petits élément comme des pictos.

    Le plus délicat est de tenir compte des espaces entre les colonnes. Dans l’exemple d’une colonne de 46 pixels on peut avoir une gouttière de 18 pixels, ce qui nous donne une double colonnes de 46px*2cols+18px = 110 px qui ne se divisent pas par 18px. Ce qui n’est pas forcément très grave.

    On peut aussi partir de la line-height, par exemple, 18 pixels et multiplier ce nombre par 3 pour obtenir une colonne de 54 pixels. Du coup, notre double colonne fait 54px*2 cols+18px=126px qui sont donc, divisible par 18.

    Après, il faut aussi tenir compte du padding qui ajoute mécaniquement des pixels entre les colonnes. Personnellement j’ai tendance à en prévoir, ne serait-ce que pour placer un dégradé ou un filet au dernier moment de chaque côté de la page sans qu’il déborde de la page ou soit collé aux contenus ;)

    Bref, quand il faut faire sa propre grille, ça peut devenir « coton » de faire quelque chose de très flexible adapté au maximum de situation. C’est sans doute pour cela que les frameworks présents sur le marché possèdent des largeurs et des nombres de colonnes souvent prévisibles.

  31. Darklg dit :

    D’ailleurs, faut se méfier des grid de ce genre, parce qu’un design surchargé utilisant ce systeme ne vaut pas mieux qu’un design en table … non ? ;)

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site