HTML & CSS

Frameworks CSS — Blueprint vs 960 Grid System

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code.

Introduction

Les frameworks CSS ont été conçus pour accélérer le processus de prototypage d’un site web tout en étant utilisables en production. Ils proposent généralement plusieurs fichiers dédiés à une tâche spécifique : reset CSS, gestion de la typographie, système de grille, etc. Les exemples de code proposés dans cet article ont été parfois remaniés par rapport aux originaux pour garder une certaine lisibilité.

Blueprint — Raccourcir les temps de développement

Créé par Joshua Clayton, Blueprint est le plus connu. Il possède l’éco-système le plus riche : tutoriaux, implémentation dans des thèmes WordPress ou Drupal, générateurs de grilles, etc. Il propose en outre une gestion complète des éléments HTML (notamment les formulaires). A côté du fichier grid.css nous trouvons : reset.css, typography.css, ie.css et forms.css, ainsi que :

  • Des «utilitaires» comme la mise en place de bordures entre les colonnes,
  • Des plugins permettent d’affiner la gestion des boutons, de la typographie, des icônes de liens, ou encore de modifier le sens de lecture pour les langues qui s’écrivent de droite à gauche,
  • Un modèle de page (template) au format .psd est disponible pour faciliter la mise en place des maquettes,
  • Blueprint est disponible sur Github.

960 Grid System (ou 960.gs) — Fluidifier le flux de production

Créé par Nathan Smith, 960 Grid System propose également un reset.css, une gestion minimale (mais suffisante pour commencer) de la typographie avec text.css et le système de grille avec 960.css ou 960_24_col.css. Il n’y a pas de fichier ie.css.

Même si l’éco-système est un peu moins riche que Blueprint, il propose l’essentiel :

Chacun des deux frameworks existe en plusieurs largeurs (950px, 960px) avec un nombre de colonnes allant de 12, 16 ou 24. Toutefois, les nombreux générateurs de grilles vous permettront de déterminer : largeur, nombre de colonnes et gouttière adaptés à vos besoins.

Fonctionnalités principales des frameworks CSS

Largeur et centrage du site web

Les deux frameworks proposent la même chose :

.container { width: 942px; margin: 0 auto; } // Blueprint
.container_16 { margin-left: auto; margin-right: auto; 	width: 960px; } // 960.gs

960 Grid System se distingue tout de même en permettant de mélanger plusieurs grilles dans un même design. C’est pour cela que les classes sont préfixées : `.container_16 grid_1 {}` au cas où vous voudriez utiliser `.container_12 grid_1 {}` plus loin dans la page. C’est un détail qui peut présenter un avantage dans certains cas, même si j’imagine que les deux versions de la grille en 12 et 16 colonnes dans le fichier 960.css sont là pour n’avoir qu’un seul fichier à intégrer dans des projets différents.

En ce qui concerne le nombre de colonnes et la largeur des gouttières, je trouve Blueprint un peu radin avec ses 10px là où 960 Grid System offre généreusement le double, soit 20px d’espace entre les colonnes.

Le seul endroit où les 10px de gouttière sont intéressants, c’est dans la version en 24 colonnes, ce qui permet d’utiliser une colonne entière (30px) pour séparer des groupes de colonnes à certains endroits et garder l’espacement de 10px pour rapprocher des contenus possédant un corps de texte plus petit et/ou répartis sur un plus faible nombre de colonnes.

Dans les exemples qui suivent, j’ai utilisé la grille que j’ai conçu lors du redesign de ce blog : 16 colonnes de 42px séparées par une gouttière de 18px pour une largeur totale de 942px.

Créer des colonnes et des gouttières

La création des colonnes pour le placement des contenus est l’élément fondamental d’un système de grille. Blueprint et 960 Grid System procèdent de manières différentes :

Blueprint

.column, .span-1, .span-2, etc. {
    float: left;
    margin-right: 18px;
}
.span-1 { width: 42px; }
.last { margin-right: 0; }

960 Grid System

.grid_1,.grid_2, etc. {
    display:inline;
    float: left;
    position: relative;
    margin-left: 9px;
    margin-right: 9px;
}
.container_16 .grid_1 { width:42px; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

Le point commun est l’utilisation de la propriété `float` pour placer les colonnes les unes à côté des autres. Pour la gouttière, Blueprint à choisi la simplicité : chaque bloc repousse le suivant avec `margin-right: 18px;`. En revanche, 960.gs réparti la moitié de la gouttière de part et d’autre de chaque colonne.

.last but not .least

Dans le cas de Blueprint, il faut ajouter une classe pour le dernier bloc afin d’annuler la marge de 18px avec `.last { margin-right: 0; }`. Quant à 960.gs, ce n’est pas la peine puisque les marges sont réparties de chaque côté. Là où ça se corse, c’est quand on a besoin d’imbriquer des colonnes.

Chez Blueprint, seule la classe `.last` est nécessaire pour chaque dernier bloc, tandis que 960.gs nécessite deux classes pour annuler les deux moitiés de marges : `.alpha { margin-left: 0; }` et `.omega { margin-right: 0; }`. Ca va sans dire mais mieux en le disant : on a pratiquement toujours besoin d’imbriquer des colonnes à un moment ou un autre.

.column ?

Cette classe peut servir à placer des blocs sans être obligé de leur donner une largeur. J’avoue m’en servir assez peu.

display: inline et position: relative ?

960 Grid System ajoute deux propriétés. La première (`display: inline`) sert à circonvenir un bug d’IE6 qui à tendance à doubler les marges lorsque des éléments flottent du même côté qu’un `margin`. `position:  relative` sert à positionner les blocs indépendamment de leur position dans le code HTML (voir plus bas).

Créer des colonnes vides avant et/ou après le contenu

Dans une maquette web, toutes les positions ne sont pas occupées par du contenu et il est bon que le site respire. Pour cela on pourra aérer toutes ces colonnes en créant du vide avant ou après. C’est là qu’interviennent les classes `.prefix_1` et `suffix_1` de 960.gs ou `.prepend-1` et `append-1` de Blueprint. Les deux frameworks ont opté pour un `padding-left` pour les premiers et un `padding-right` pour les seconds pour « remplir » les blancs afin de conserver une largeur égale à la largeur de votre `.container`.

Positionner des blocs à l’écran indépendamment de leur position dans le code

La position des éléments dans le code est souvent tributaire de la manière dont on veut les afficher à l’écran. Si vous désirez modifier la position de votre sidebar par rapport au contenu sans modifier l’ordre des blocs dans votre code HTML, il suffira d’utiliser les classes suivantes :

960 Grid System

.container_16 .push_1 { left:60px; }
.container_16 .pull_1 { left:-60px; }

Blueprint

.push-1 { margin: 0 -60px 1.5em 60px; }
.push-1, .push-2, etc. { float: right; position: relative; }
.pull-1 { margin-left: -60px; }
.pull-1, .pull-1, etc. { float: left; position: relative; }

Là, tout d’un coup, on voit les avantages du `position: relative` de 960.gs vu plus haut qui fait gagner en concision et qui permettra de placer facilement du contenu en `position: absolute` si besoin. Quand à Blueprint, il est un peu trop verbeux sur ce coup-là à mon goût (les `etc.` étant bien entendu à remplacer par l’ensemble des sélecteurs nécessaires selon le nombre de colonnes).

Rétablir le flux HTML après l’utilisation des flottants

Pour rétablir votre flux HTML après les float: left, il existe plusieurs techniques dont j’ai déjà longuement parler dans les articles Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Les deux frameworks proposent un jeu de classes CSS qui devrait vous permettre de voir venir. Pour info, voici la technique utilisée par 960.gs :

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/* The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.*/
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

La différence avec Blueprint tient principalement à la classe `.clear` qui ne contient que le minimum :

.clear { clear:both; }

Les deux classes `.clear` ne s’utilisent pas de la même façon : celui de 960.gs s’utilisera de préférence sur une balise `hr`, `br`. On pourra également l’utiliser sur des balises `span` ou `div` à condition qu’elles n’aient pas vocation à afficher du contenu ; le `.clear` de Blueprint s’utilise sur n’importe quelle balise avec ou sans contenu. Traditionnellement, c’est celui qu’on utilise sur un footer qui doit passer sous la barre latérale et le contenu principal.

Conclusion

Il y a de bonnes idées dans les deux frameworks. Je ne suis pas fan de la gestion des marges de part et d’autre des colonnes de 960.gs : je préfére la simplicité de Blueprint. En revanche, je préfère les classes `.push` et `.pull` de 960 Grid System qui sont bien plus concises que celles de Blueprint. Pour finir, je trouve que le `.clear` de 960 Grid System mérite d’être renommé en `.clear-hide` pour pouvoir ajouter un `clear: both` simple mais toujours très pratique. Bref, il faut composer son propre framework CSS en piochant les bonnes idées à droite et à gauche.. Stay tuned!

Autres notes sur les frameworks CSS et le design par grille de mise en page

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. […]

Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de pagePostscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). […]

Grid Design — Quelques notes sur l’intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dansFramework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif […]

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière,Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML […]

Framework CSS sémantique ? Comment je vois les choses

Je 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 selon lequel les frameworks ne sont pas sémantiques et incitent à marcher sur la tête en bousculant le flux de production web. […]

24 frameworks CSS — Mettez une grille (ou pas) dans votre site web

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. […]

BIC, framework CSS orienté couleur et typographie

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). […]

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. […]

Frameworks CSS + Reset CSS : design from scratch

L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. […]

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. […]

Publié le par Bruno Bichet