Frameworks CSS — Blueprint vs 960 Grid System

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

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 ClaytonBlueprint 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 Smith960 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. [...]

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.



20 commentaires pour “Frameworks CSS — Blueprint vs 960 Grid System”

  1. Une énorme différence entre les deux frameworks, c’est quand même la gestion de la grille horizontale.

    Blueprint y fait très attention et propose même une gestion (certes parfois capricieuse) bien plus aboutie puisque basée sur des unités relatives (em). Ce qui selon moi est un point essentiel.

  2. Bruno Bichet dit :

    HTML zen garden — Oui, c’est effectivement un des points forts de Blueprint. Mais comme je l’ai précisé dans l’article, je n’ai abordé que les fichiers grid.css et 960.css et non les éléments concernant la typographie.

    Il serait intéressant de mixer les grilles horizontales et verticales dans un nouveau framework, mais si les aspects horizontaux des grilles sont inclus dans les fichiers typography.css, etc. ce n’est sûrement pas un hasard ;)

    Un jour, il faudra que je me penche sur un brouillon que j’ai commencé sur cette question de grille horizontale. Mais pour résumer, je n’y crois pas trop : il faudrait pour cela faire en sorte que les images, les encarts publicitaires, etc. possèdent une hauteur qui soit un multiple de la ligne de base, et ça, c’est possible, oui, mais avec énormément (trop) de contraintes au quotidien.

    J’ai déjà eu l’occasion d’aborder cette question dans cette suite de commentaires : http://css4design.com/grid-design-quelques-notes-sur-linteret-des-grilles-de-mise-en-page#comment-4002

  3. Chibani dit :

    J’ai beaucoup apprécié cette lecture matinale. Je cherche actuellement à me simplifier la tâche lorsque je fais de l’intégration. Merci Bruno ;)

  4. J’utilise Blueprint sur quelques projets, et je n’ai jamais utilisé .column…

    Concernant .clear, il n’est normalement pas non plus nécessaire si on a bien la somme des largeurs de colonnes qui fait 24 (ou le nombre différent qu’on a choisi).

  5. [...] Frameworks CSS — Blueprint vs 960 Grid System [...]

  6. Raph dit :

    Salut,

    Je n’ai pas compris ces histoires de « pull » et de « push », si quelqu’un veut bien m’éclairer…

  7. Bruno Bichet dit :

    Raph — La classe .pull-1 appliqué à un bloc va le tirer d’une colonne vers la gauche sans que l’on soit obligé de déplacer le bloc dans le code html (une balise div par exemple).

  8. Raph dit :

    Bonsoir Bruno, Je ne comprends toujours pas : autant positionner tout de suite ton bloc au bon endroit ?! Le pire c’est que j’ai déjà réalisé 3 ou 4 site avec 960 Grid System. Je vais mieux me documenter pour comprendre l’intérêt de ce truc…

  9. Bruno Bichet dit :

    Raph — La raison la plus courante qui fait qu’on préfère parfois déplacer un bloc avec les CSS plutôt qu’en changeant l’ordre des balises HTML c’est pour optimiser le SEO.

    En gros, ça permet par exemple de placer visuellement une barre latérale à gauche du contenu tout en la mettant après ce dernier dans le code. Bon, là, bien sûr, on peut très bien imaginer des méthodes plus simples comme un float:right sur la sidebar, mais c’est très intéressant lorsqu’il y a plusieurs « barres latérales ».

  10. [...] Frameworks CSS — Blueprint vs 960 Grid System [...]

  11. [...] Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid » Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un [...]

  12. [...] 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 ? Frameworks CSS — Blueprint vs 960 Grid System [...]

  13. [...] Frameworks CSS — Blueprint vs 960 Grid System 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 ? Blog 20/06 web design resources usefull tools Design Web design [+] Layout about mastering Gestion de Projet formation introduction Grids getting toolbox Layout coding photoshop useful gridsystems alignment system grid system photoshop Framework CSS grilles blueprint frameworks Grid steps pr0n downloads aller astuces Pédagogie / Formation / Elearning google connaissances anglais art biennial music (x)HTML(5) et CSS(3) technique attention reset css&html chocotemplates Grid design detailed Web Design gradient grid brief layout grids CSS explained introduction template fresh screens CSS apart cascading typographical design site p icons color web Design Tools builder alignment web design image Web Design articles pédagogie faisait connectivisme 960 grids 1140px system Ressources every wireframing useful ressources photoshop freebies GTD gravir getting Framework gantry custom parameter Grid information alignement designing école du futur ecole homme Tutoriels formations animé accueil Serious Games simulation gtd politics mastery nozbe Website – Grids – Frameworks Website – Grids Web development – Projects – Website home • contact • blog • fb • twitter to experience pearltrees activate javascript. [...]

  14. [...] 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 ! Frameworks CSS — Blueprint vs 960 Grid System [...]

  15. Julie smoaks dit :

    vous trouverez dans la suite de cet article air yeezy 2 une comparaison et une explication de code

  16. a première impression aussi c’est que l’interface Unity semble bien/mieux adapté à la télé.Nike Jordan 3, The Who / Underture aurait mérité sa place dans ce top.

  17. Grid System dit :

    les effets graphiques sont ajoutés dans un deuxième chaussures supra temps pour les navigateurs modernes

  18. andre dit :

    je n’ai abordé que les fichiers grid.css et 960.css et non les éléments concernant la typographie.http://www.andre-santini.fr elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web,

  19. tradethik dit :

    les encarts publicitaires, etc. possèdent une hauteur qui soit un multiple de la ligne de base, et ça, c’est possible, http://www.tradethik.fr/ oui, mais avec énormément (trop) de contraintes au quotidien.

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