Blueprint, un framework pour webdesigner

Blueprint est un framework créé par Olaf Torsen. Un framework de plus me direz-vous. Comme si ça suffisait pas déjà avec les Ruby On Rails, symfony et autres CakePHP ? Ami lecteur développeur, Blueprint na rien à voir avec tout ça ; Blueprint est un framework d’un nouveau genre : c’est un framework pour webdesigner.

Blueprint est un framework créé par Olaf Torsen. Un framework de plus me direz-vous. Comme si ça suffisait pas déjà avec les Ruby On Rails, symfony et autres CakePHP ? Ami lecteur développeur, Blueprint na rien à voir avec tout ça ; Blueprint est un framework d’un nouveau genre : c’est un framework pour webdesigner.

Blueprint est un framework créé par Olaf Torsen. Un framework de plus me direz-vous. Comme si ça suffisait pas déjà avec les Ruby On Rails, symfony et autres CakePHP ? Ami lecteur développeur, Blueprint na rien à voir avec tout ça ; Blueprint est un framework d’un nouveau genre : c’est un framework pour webdesigner.

Un framework pour designer

Tout le monde sait que les webdesigners sont des quiches en programmation [1]. Alors à quoi peut ressembler un framework pour webdesigner ?

Pour les lecteurs les moins techniques de ce blog, je précise la notion de framework. Un framework est est un ensemble de procédure et de bibliothèques permettant le développement rapide d’applications. En résumé, c’est une sorte de sur-couche d’un langage (php, ruby ou asp par exemple) qui vous permet de développer très rapidement des applications grâce à l’automatisation de tout un tas de tâches basiques que vous effectueriez normalement lors de chaque développement d’application (connection à des bases de données, création d’enregistrement etc…). Tout ceci se fait grâce au respect de certaines règles de nommage et à l’aide de bibliothèques.

Un framework pour webdesigner est donc un framework qui permet de créer des mises en pages simplement et rapidement à l’aide de plusieurs feuilles de style spécialisées.

Quatre feuilles de style

Blueprint est composé de quatre feuilles de style :

reset.css
efface tous les styles par défaut des navigateurs : margin et padding à 0, plus de bordure, de gras d’italique, textes ferrés systématiquement à gauche etc…
buttons.css
permet d’affecter des styles à vos boutons, identiques quels que soit le navigateur utilisé [2]
typograpy.css
gère toute la typographie de votre site
grid.css
permet de créer une mise en page en 2, 3, 4 ou même 14 colonnes !

Blueprint propose également une feuille de style dédiée à l’impression, la bien nommée print.css.

Pour faire fonctionner le tout, il suffit d’insérer dans l’entête de votre fichier html (le head) l’appel à la feuille screen.css laquelle se charge d’importer les quatre css ci-dessus.

<link rel="stylesheet" type="text/css" href="/blueprint/print.css" media="print, projection" />
<style type="text/css" media="screen">@import url(/blueprint/screen.css);</style>

Bien sûr, si vous ne voulez pas utiliser telle ou telle fonctionnalité du framework, il vous suffit de commenter dans screen.css l’appel à la feuille de style concernée.

Avantages

Si vous êtes un maniaque du rythme vertical et de la typo vous allez adorer typography.css. Avec l’import de cette feuille de style, tous les textes sont calés sur une ligne de base définie en fonction de la taille de la police. Cette technique venue du monde du papier donne un rythme vertical impeccable à la page web – c’est ce qui fait dire en général d’une page qu’elle propre.

Dans le même ordre d’idée, grid.css propose une grille horizontale et vous permet de réaliser des mise en page assez complexes, en 2, 3, 4 colonnes ou plus, le tout sur la base basé d’une grille de 960 pixel de large divisée en 14 colonnes de 50 pixels séparées par une marge de 20 pixels. Pour créer des colonnes, il suffit d’affecter des noms de classe à vos divs en respectant la nomenclature de Blueprint [3]. En test, j’admets que c’est assez bluffant. Par contre, en prod…

Inconvénients

grid.css fournit un cannevas un peu trop rigide pour justifier son utilisation. Si vous faites une mise en page très simple, grid.css vous facilitera la vie. Par contre, dès qu’il faut ajouter une bordure ou jouer avec les padding pour insérer une image de fond, grid.css s’avèrera être un obstacle redoutable. Après quelques heures d’acharnement aux cours desquelles j’ai tordu grid.css dans tous les sens en essayant de ne pas top toucher aux styles par défaut (sinon, le framework perd tout son intérêt) j’ai abandonné grid.css pour créer ma propre grille verticale.

Autre problème : la mise en oeuvre de grid.css nécessite l’ajout de noms des classes pas très sémantiques dans les div auxquels vous souhaiter appliquer des styles :

<div class="column span-2 prepend-3>

Certes pour dans le cadre de l’tilisation d’un framework cette logique se justifie. Cependant, je préfère de loin nommer mes class et mes id avec des termes qui ont du sens genre menu, content ou footer… Ceci dit, c’est un moindre mal : on peut toujours renommer les classes directement dans grid.css.

Enfin, ce qui me gêne vraiment avec l’utilisation de Blueprint, c’est qu’il faut modifier le code html pour réaliser la mise en page. En effet, c’est l’affectation de classes type column ou span-3 à tel ou tel div qui permet de créer le colonage de la maquette. Ce faisant, on perd de vue la finalité des feuilles de style dont le but premier est justement de pouvoir changer la mise en page d’un site sans avoir à toucher au code html. En cela, Blueprint ne respecte pas tellement l’une des trois règles d’or du webdesign moderne : la séparation du contenu et de la présentation.

Déjà qu’en France on respecte de moins en moins la séparation de l’Eglise et de l’Etat, si en plus les frameworks s’y mettent, dans quelques semaines je vais me mettre à chanter un Alleluïa au début de chaque billet de ce blog alors je vous le demande : où va-t-on ma bonne dame sinon vers une cinquième République 2.0 de culs bénis mais je m’égare, je m’égare.

Conclusion

Hormis ces quelques défauts inhérents à la notion de de framework, Bluepint est assez pratique et permet sinon de créer un site complet au moins de réutilser quelques unes de ses feuilles de style et de s’inspirer de quelques principes contenus dans grid.css. Personnellement je suis absolument fan de typography.css. De plus, depuis que j’ai découvert Blueprint, mes cheveux sont moins gras et j’ai perdu 18 kilos j’essaye d’être plus rigoureux dans l’utilisation et le respect de grilles dans mes maquettes. Au final, Blueprint est assez prometteur surtout lorsqu’on sait qu’il est actuellement dans sa version 0.4.

Pour creuser sur blueprint et le concept de grille en (web) design, c’est dans mon delicious, aux tags blueprint et grid

  1. ou font semblant de l’être parce qu’ils veulent continuer à faire des trucs rigolos dans photoshop pendant leur journée de travail
  2. À utiliser avec modération : il est toujours dangereux de modifier les styles par défaut des éléments de formulaire
  3. c’est d’ailleurs ça qui fait de Blueprint un framework : l’automatisation de tâches répétitives à l’aide de bibliothèques et d’une nomenclature

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Cool, un billet en cours à rayer de ma todo list tellement je suis d’accord avec ton analyse et tes conclusions 😉
    a++

  2. Eh bhé dis donc, qui a dit que personne glandait rien pendant le mois d’août ? C’est la météo qui te stimule ??

  3. Br1o>> merci ! ceci dit je me demande bien à quoi resemblera ce framework dans une version 1

    Laparizienne>> euh oui, paris sous la pluie au mois d’août, ça m’inspire

  4. Tu dis que ce framework ne permet pas une séparation totale contenu/présentation à cause du fait qu’on doit associer des classes aux DIV.

    MAis concrètement, le CSS ne permet jamais de séparer totalement. ON ets toujours obligé d’appliquer une classe ou un id à tel ou tel éléments HTML.

  5. John > je ne sais pas si c’est ce qu’à voulu dire Gregoire, mais j’ai souvent la tentation de créer des « classlet » c’est à dire que je crée une class . left {float left} , .right {float: right}, etc… Ainsi que des class .center {text-align: center}, .clear {clear: both}…

    Jusque là, ça va… Mais il est aussi tentant de créer d’autres classes pour gérer la présentation de façon granulaire : padMini {padding: 1.5em} et un padBig {padding: 3em} Bref, le moment arrive où le html ressemble à de la souple de classes, genre : div class= »left center padMini clear »…

    Ca paraît une idée pas si mauvaise, mais à l’usage, je me rends compte que je n’arrête pas de faire des allers-retour « prise de tête » pendant la conception entre les CSS et le HTML : structure et présentation se mélangent, sinon dans la lettre, mais au moins dans l’esprit ^_^

    Et là, c’est juste pendant la phase de conception, lorsqu’il faut traquer un bug, ça devient vite ingérable.

  6. John >> ce que je voulais dire, c’est que je préfère affecter une classe « date » à un tag em qui entoure une date et qui la passera en rouge plutôt qu’une classe « red ». Ca a plus de sens. Comme ça, si demain je veux que mes dates soient vertes, je n’aurais qu’à changer la règle dans ma feuille de style plutôt que le nom de ma classe dans le code html. Blueprint adopte plutôt la logique de la classe »red ».

    Sinon, je suis tout à fait d’accord avec toi : on ne sépare jamais complètement la présentation de la structure. D’ailleurs ça fera l’objet d’un billet très prochainement…

  7. Commentaire très tardif mais j’ai découvert Blueprint il y a 10 jours et je viens de tomber sur ce post, que je trouve intéressant …

    Pour mes mises en forme relativement simple, je trouve Blueprint bien pratique. Ma faible pratique du (X)HTML et des CSS fait que je comprends tout à fait ta remarque sur les noms de classes. Ca recoupe complètement c’est que j’ai pu découvrir par moi-même (avant de découvrir Blueprint).

    La question que je me pose est la suivante : créer des class spécifiques à notre site/appli web à partir des class Blueprint est possible, mais cela peut il permettre de résoudre le problème que vous évoquez ?

    Merci d’avance.

Laisser un commentaire

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