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