Test du framework CSS BluePrint

Suite du dossier sur les frameworks CSS dont nous avons expliqué le concept dans le premier épisode. Cet article démarre la série de tests de trois de ces outils. Le premier candidat est BluePrint. Il fait partie des frameworks CSS dont on parle beaucoup en ce moment, et il semble plutôt bien apprécié.

Ce framework fait l’objet d’une seconde série de tests dont les résultats et les conclusions sont visibles ICI

Premier contact

Le site de BluePrint est minimaliste: un lien pour le téléchargement, quelques exemples, rien de plus.
Logo du framework BluePrint
L’archive ZIP à télécharger est légère, mais contient l’essentiel: les feuilles de styles, et un répertoire d’exemples (ceux du site).
Les feuilles de styles sont au nombre de six:

  • La première, reset.css contient tous les éléments pour mettre à 0 les attributs des styles standards,
  • grid.css contient tous les styles de positionnement des blocs dans la grille,
  • Une feuille pour la typographie (typography.css),
  • Une feuille dédiée au design des formulaires (form.css),
  • print.css traite les particularités d’impression,
  • Et la dernière, ie.css pour les « petites » corrections liées à Internet Explorer.

A noter qu’une très grande partie des styles présents dans ces fichiers sont regroupés dans deux fichiers screen.css et print.css.

Documentation

Inexistante. Le site propose un lien vers un tutorial, mais il en fait le minimum.

L’utilisation

Le principe d’utilisation de BluePrint est extrêmement simple, et suit parfaitement le concept de Grid CSS: le design est un agencement de blocs dont la taille est multiple de 40px (largeur 30px, marge 10px).
Pour la structuration de la page, la méthode est la suivante:

  • Une classe container, qui fixe la largeur de la page (750px, 950px …),
  • BluePrint divise verticalement, la page en n colonnes, n=largeur de la page/40,
  • Une série de classes span-x permettent d’indiquer la taille des blocs (x = 1 à 12). Par exemple, la classe span-4 permet de créer un bloc de 150 pixels de largeur, avec une marge de 10px.
  • Deux séries de classes append-x et prepend-x ajoute un padding à gauche ou à droite des blocs,
  • Les séries de classes push-x et pull-x décalent à droite, des blocs initialement alignés à gauche, et décalent à gauche, des blocs initialement alignés à droite.

Les paddings et les décalages sont systématiquement multiples de 40px.

Pour la typographie, les styles essentiels y sont: les titres (h1 … h6), les listes ul, ol, dt, ainsi que les attributions strong, em

Le tableau ci-dessous donne les liens vers les pages obtenues, ainsi que les sources:

Layout 1 Layout 2 Layout 3
Design cible Structure 1 Structure 2 Structure 3
BluePrint Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat

A noter l’existence d’un générateur de code qui permet construire des pages simples rapidement.

Commentaires

Le nombre de classes étant réduit au minimum, l’apprentissage est rapide. Le découpage horizontal est précis, et clair: la largeur de chaque élément de la page s’exprime en nombre de blocs. L’affichage d’une grille en image de fond est très pratique en mode debug (il suffit d’ajouter la classe showgrid à la div container).
Cette simplicité permet un apprentissage et un développement extrêmement rapides, tout en laissant finalement une assez grande liberté de design, à condition de respecter les proportions, c’est-à-dire que l’on ne change pas la taille des blocs.
Ce dernier point constitue le défaut principal de BluePrint: tout changement d’attributs padding, margin ou border, modifie la taille des blocs, et donc perturbe « la grille » (on se croirait dans Matrix). Le design devient alors ingérable.

Par contre, j’apprécie vraiment les feuilles de styles typography.css et form.css, parce qu’elles permettent très simplement de respecter le rythme vertical du design.

Conclusion du test

BluePrint est simple, facile à aborder, et permet de concevoir des structures de page HTML, très rapidement. Son principe d’utilisation, basé sur des blocs de taille fixe, pose cependant quelques petits soucis sur des sujets pourtant simples: « éloigner » le texte du bord d’un bloc (padding) décale tous les alignements.
De ce point de vue, BluePrint doit être considéré comme une base de travail personnalisable, et non comme un produit fini. En modifiant les paramètres de la grille, en ajoutant par exemple, des marges, ou des éléments que nous avons l’habitude d’utiliser, la grille prend tout son intérêt. Seul soucis, mais il est de taille: nous modifions les styles du framework, ce qui n’est pas très compatible avec la notion même de framework.
Les styles de typographie sont, par contre, très intéressants et utilisables directement. Ils respectent les recommandations de design habituellement rencontrées (notion de rythme vertical, que j’ai d’ailleurs découvertes à cette occasion).

Autres articles de cette série

  1. Un framework CSS hybride (9 juillet 2008)
  2. Test du Framework CSS 960 Kit (3 juillet 2008)
  3. Frameworks CSS: Conclusion (28 juin 2008)
  4. Framework CSS: test de YAML (23 juin 2008)
  5. FrameWork CSS: Tests de BluePrint v2 (18 mai 2008)
  6. Test du framework CSS Yahoo YUI (17 mai 2008)
  7. GridFox: aide au développement sous Firefox (11 mai 2008)
  8. Test du framework CSS BluePrint (19 avril 2008)
  9. Les frameworks CSS (14 avril 2008)

1 thought on “Test du framework CSS BluePrint”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *