FrameWork CSS: Tests de BluePrint v2

Les précédents tests réalisés sur BluePrint n’ont pas conduit à des résultats très satisfaisants. Depuis, je suis tombé sur différents articles donnant des avis plutôt positifs sur ce framework. J’ai également progressé dans ma façon d’appréhender ce type de produit, en évaluant Yahoo YUI.

J’ai donc ré-examiné le produit, pour vérifier mon diagnostic initial. Les conclusions de cette seconde vague de tests sont plus positifs que les précédentes.

Nouvelle approche

Première chose avant de reprendre les designs initiaux: savoir si l’approche utilisée initialement est la bonne ou pas. Après analyse de quelques sites utilisant BluePrint (comme ScrapBrain par exemple), il devient évident que ma façon d’aborder le framework n’était pas la bonne. J’ai loupé deux points:

  • Les styles de Grille ne servent qu’à construire une structure de page. Il ne faut pas y placer directement le contenu, mais utiliser des éléments supplémentaires, notamment pour gérer les espacements,
  • Les feuilles de styles sont entièrement paramétrables

Styles de positionnement et styles de contenu

Les styles de grid.css servent, avant tout, à gérer la structure des pages, pas à gérer le contenu. Il faut donc voir ces styles comme des conteneurs qui recevront des blocs de contenu. En positionnant le texte directement dans les blocs de BluePrint, j’étais confronté à des problèmes d’alignement dès que je cherchais à ajouter des espacements (padding), des marges (margin), ou des bordures (border).

La bonne approche est donc

  • De créer la structure de la page (colonne principale, une ou plusieurs sidebars …) avec les styles du framework,
  • D’utiliser ensuite d’autres blocs à l’intérieur de cette structure pour y placer le contenu.

Les deux schémas suivants montrent le résultat de l’indentation d’un paragraphe avec les deux approches:

Approche initiale: Insertion du contenu directement dans la structure de BluePrint.

Premiere approche - Utilisation directe des blocs de BluePrint

Seconde approche: Utilisation de bloc de contenu

Seconde approche- Utilisation de blocs de contenu

Feuille de styles paramétrables

La feuille de styles grid.css ne propose qu’une seule largeur de page (960px), découpée en 24 colonnes. L’erreur est de considérer que ces valeurs sont fixées une bonne fois pour toute.
En plus des feuilles de styles, BluePrint propose en effet des scripts pour les adapter. Les scripts permettent:

  • De choisir les paramètres de la grille: largeur de page, nombre de colonnes, marges,
  • De renommer certains styles pour re-donner un peu de sémantique à la page HTML,
  • D’ajouter nos propres styles.

Nous pouvons demander une largeur de page de 750px, avec 19 colonnes, et que les attributs du style span-19 soient également disponibles pour un style qui s’appelle footer par exemple. La configuration s’effectue en éditant le fichier setting.yml ou settings.example.yml, puis en exécutant le script Ruby compressor.rb.

Une autre solution est d’utiliser l’outil en ligne BluePrint Grid Generator, qui génère automatiquement la feuille de style grid.css, une version compressée de cette feuille, ainsi qu’une grille au format png.

La démarche d’utilisation du framework consiste donc à:

  • Elaborer une vue globale du design à réaliser, en définissant notamment le rythme horizontal (avec phase crayon papier, PhotoShop …),
  • Générer la feuille de styles adaptée au design,
  • Construire la ou les pages en utilisant cette feuille de styles

Utilisation du framework

Voici donc maintenant les tests et les commentaires associés, revus et corrigés.

BluePrint est constitué d’un ensemble de feuilles de styles et de scripts, téléchargeables ICI. Les feuilles de styles sont au nombre de six:

  • reset.css contient tous les éléments pour mettre à 0 les attributs des styles standards,
  • grid.css regroupe tous les styles de positionnement, ceux qui permettent de construire la structure de la page,
  • typography.css propose les styles typographiques (p, h1, h2, …),
  • form.css contient quelques styles pour la conception des formulaires,
  • print.css traite les particularités liées aux impressions,
  • Et la dernière, ie.css est destinée à corriger les « petites » bizarreries d’Internet Explorer.

Ces feuilles de styles sont regroupées dans deux fichiers « compressés »: screen.css et print.css.

Les scripts compressor.rb et validate.rb, écrits en Ruby, permettent de construire les feuilles de styles, de les « compresser », puis de les valider. L’utilisation de ces outils nécessite donc de disposer de cet interprêteur.

Documentation

Je ne change pas d’avis par rapport à l’article précédent. La documentation est inexistante sur le site de BluePrint. Quelques utilisateurs comme Lee HoneyCutt nous proposent une série de liens vers des exemples, et des ressources qui permettent de se dépanner.

Il s’est d’ailleurs crée, autour de ce framework, une communauté étonnement active, qui a écrit des docs, développer des exemples, ou des outils pour le promouvoir.

Utilisation

Le concept de BluePrint est extrêmement simple, et suit parfaitement le concept de Grid CSS: la page est découpée en colonnes de largeurs X. Le design est un agencement de blocs dont la taille est multiple de X.

Comme décrit précédemment, la démarche globale d’utilisation du framework est la suivante:

  • Elaborer une vue globale du design à réaliser. Cette phase peut se faire de différente façon en fonction des connaissances de chacun: crayon/papier, photoshop…,
  • Déduire de ce design, les paramètres du rythme horizontal: largeur de page, nombre de colonnes, largeur de la marge droite,
  • Générer la feuille de styles adaptée au design, en utilisant, soit les scripts Ruby, soit les outils en lignes,
  • Construire la ou les pages en utilisant cette feuille de styles.

Les pages sont globalement structurées de la façon suivante:

  • Une classe container, qui fixe la largeur de la page (750px, 950px …),
  • Une série de classes span-x permettent d’indiquer la taille des blocs. Par exemple, avec les dimensions de la feuille de styles par défaut, la classe span-4 permet de créer un bloc de 40*4 = 160 pixels de largeur, dont 10px de marge,
  • Deux séries de classes append-x et prepend-x ajoutent un padding à gauche ou à droite des blocs,
  • Les séries de classes push-x et pull-x déplacent vers la droite, des blocs initialement alignés à gauche, et déplacent vers la gauche, des blocs initialement alignés à droite. Ces styles permettent de « casser », le rythme horizontal, en autorisant des décalages ou des recouvrements,

Le schéma suivant présente des exemples d’utilisation des styles fournis par BluePrint:
Exemple de positionnement de blocs avec BluePrint

La feuille de styles typography.css est très complète, elle traite:

  • Les titres h1,h2, … ,
  • Les tables, avec la possibilité de différencier les lignes paires et impaires,
  • Les listes ul, ol et dl,
  • Les attributs de texte (blockquote, strong, em, abbr, acronym, …)

La taille de caractère de base est 12px (75% de la taille par défaut), l’interligne est de 1.5em.

A noter que toutes les feuilles de styles passent le test de validation du W3C.

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

Layout 1 Layout 2 Layout 3
Design Cible Première design à réaliser avec BluePrint Second design à réaliser avec BluePrint Troisième design à réaliser avec BluePrint
BluePrint(tests précédents) Résultat Résultat Résultat
BluePrint Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat
Fichier HTML
Fichier CSS
Résultat

Les différences entre les premières et les secondes versions semblent minimes à priori. Mais si l’on regarde attentivement les secondes versions:

  • Aucun texte n’est collé au bord de l’un des blocs,
  • Dans le layout 2, les trois blocs de catégories sont de même largeur, et les titres sont centrés,
  • Les espacements internes aux blocs peuvent être modifiés sans déformer à la structure du site.

Pour compléter le descriptif, le kit contient également des feuilles de styles permettant de créer de formulaires et des boutons type « Web 2.0 ». Les styles sont utilisables directement, ou avec très peu de modifications.

Commentaires et conclusion

Les principales qualités de BluePrint sont:

  • La simplicité: L’apprentissage et les premiers développements sont extrêmement rapides.
  • L’efficacité: il rempli parfaitement son rôle en libérant le développeur des contraintes liées aux subtilités des styles CSS, et aux problèmes de compatibilités des navigateurs.

Les designs obtenus sont très stables vis-à-vis des problèmes d’interprêtation des différents navigateurs: les pages s’affichent rigoureusement de la même façon sur Internet Explorer 6 et 7, sur FireFox 2.0, Safari ou Opera.

La notion de grille reste très souple à utiliser puisque nous pouvons en définir les paramètres principaux. Les styles typographiques sont très complets. J’aurais préféré des titres un peu moins imposants (36px pour la balise h1 par exemple).

BluePrint souffre de deux inconvénients:

  • Le principal est l’empilement des blocs div, qui nuit un peu à la sémantique de l’ensemble,
  • J’ai constaté quelques petits problèmes de robustesse: la structure de la page est sensible à la taille du contenu. Un article « trop large » empêchera l’affichage correcte de la sidebar.

Le point fort de BluePrint reste la partie typographie, qui permet de suivre un rythme vertical précis avec un minimum d’effort.

Références / Ressources

  • (en) BluePrint Code Generator – Kematzy,
  • (en) BluePrint Cheat Sheet – DigitArt

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 “FrameWork CSS: Tests de BluePrint v2”

  1. Bonjour,

    Merci pour c’est deux excellent articles, qui m’on donnée vraiment envi d’utiliser Blueprint pour mes projet.

    Il y a une petit erreur de 10px sur la largeur de la page, elle est fixé à 950px par défaut.

Laisser un commentaire

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