Les frameworks CSS

Pour les non professionnels, le développement HTML / CSS est souvent un véritable casse-tête: positionnement des éléments, subtilité des règles CSS, compatibilité avec les navigateurs… autant d’obstacles qui font perdre beaucoup de temps. Jusqu’à présent, les outils de développement CSS ne nous aidaient pas vraiment: la majorité sont de simples éditeurs de texte, qui affichent juste le rendu de la page. L’arrivée des frameworks CSS peut donc être une bonne nouvelle. J’avoue ne pas être vraiment convaincu, c’est pourquoi je vais réalisé quelques tests « grandeur nature », afin d’évaluer la réelle valeur ajoutée de ces outils.
J’entame donc une série d’articles sur ce thème: après un rappel des concepts de Grid CSS et de Framework CSS, nous passerons aux tests, avec trois frameworks: BluePrint, Yahoo YUI et YAML.

Préambule

Je suis rescemment tombé sur plusieurs articles discutant du framework BluePrint. Je n’étais pas spécialement emballé par le concept pensant qu’une bibliothèque de ce type ne ferait qu’ajouter de la complexité.
Malgré tout, je souhaitais creuser l’idée, effectuer quelques tests, pour vous concocter un article. Entre temps, j’ai lu cette excellente traduction de Bruno Bichet, à laquelle je n’ai pas grand chose à ajouter.

J’ai donc ré-orienté mon dossier en abordant le sujet de façon plus concrète:

  • Je vais faire un très rapide rappel des concepts de Grid CSS et de Framework CSS, tels que je les ai compris,
  • puis continuer par un test grandeur réelle des trois frameworks sur des exemples précis.

Grille et Framework CSS

Elaborer une page web comporte deux activités:

  • Le design proprement dit: quelle largeur, combien de colonnes, positionnement des blocs, les couleurs …
  • Le développement, pour reproduire le design avec les langages HTML et CSS.

Les Grid CSS servent de support à la phase de design, tandis que les Framework CSS, en s’appuyant sur les règles des grilles, optimisent la phase de développement.

Les grilles CSS

L’idée est d’appliquer aux pages web, les règles de design habituellement utilisées dans les mondes des graphistes et de l’imprimerie.
Suivre ces règles permet d’obtenir un design harmonieux, qui respecte des proportions précises, des rythmes verticaux et horizontaux.

Les rythmes verticaux sont principalement fixés par la typographie. L’objectif est d’obtenir un espacement régulier des textes. Si la taille des titres (balises h1, h2 …) et des marges associées sont fixées arbitrairement, les hauteurs des lignes de texte vont varier d’un bloc à l’autre…).
Si l’on veut respecter un rythme vertical, il faut:

  • Fixer ce rythme, en définissant un espacement vertical constant (18 pixels par exemple),
  • Fixer les tailles des éléments p, 1, … h4, … pour que les titres et le texte s’affiche toujours dans les limites de l’espacement défini.


En fixant une hauteur de ligne constante pour toute la page, le résultat sera proche de ce que l’on trouve dans l’édition (livres, magasines, journaux …).

Les rythmes horizontaux sont traités avec la notion de proportion: proportions entre hauteur et largeur de bloc, proportions entre largeur de colonnes … Il n’existe pas de règles particulières pour les définir. Les plus utilisées sont les valeurs:

  • « classiques »: 1/2, 1/3, 1/4 …
  • « techniques »: 4/3 ou 3/2 dans le domaine de la photo, 1.414 qui sont le rapport des feuilles de papier A4, A3 …
  • « magiques »: comme le nombre d’or Phi = 1.618

Aborder le design d’une page web avec le concept de Grille CSS consiste à découper, cadriller la page suivant des proportions précises, et de « dessiner » ensuite le design de la page, en respectant ces cadrillages.

Exemple d'utilisation d'une grille

L’utilisation des grilles me semble un moyen simple et peu contraignant, pour obtenir des pages esthétiquement plus harmonieuses. La méthode de conception devient assez mécanique:

  • Choix des paramètres fondamentaux: proportion, rythmes horizontaux et verticaux,
  • Construction de la grille,
  • Conception de la page en suivant les limites de la grille.

Je trouve ce concept très utile à tous ceux qui, comme moi, conçoivent des pages une ou deux fois par an, et à « l’intinct ».

Les frameworks

Les frameworks CSS proposent un ensemble d’outils pour le développement de pages web, en suivant les règles fixées par les grilles.
Ces frameworks contiennent en général:

  • Une feuille de style permettant de supprimer les valeurs par défaut de certains attributs tel que les marges, les padding … (Reset CSS),
  • Un ensemble de styles, dits de positionnement, qui tiennent compte des proportions dans la construction des blocs qui constituent la structure de la page (Grid CSS),
  • Un ensemble de styles, dits de typographie, qui fixent les tailles de différents éléments, du type titres et textes, afin de respecter le rythme vertical (Font CSS).

D’un point de vue purement informatique, l’objectif des frameworks est de soulager le développeur des emm… embêtements habituels:

  • Gestion des subtilités de positionnement CSS,
  • Compatibilité du code avec les navigateurs.

Ils permettent également de définir une structure standard plus facilement lisible.

Pour résumer

Sur le papier les frameworks CSS sont attractifs. Parmi les avantages et inconvénients relevés dans l’article de Bruno Bichet, je retiens:

  • Avantages
    • Rapidité de développement (pas de soucis d’alignements, de gestion des navigateurs …),
    • Le respect des règles de design tels que la typographie, les rythmes horizontaux et verticaux.
  • Inconvénients
    • Contraintes de design (rigidité),
    • Complexité supplémentaire

Les débats sur ce sujet sont très nombreux, mais aucun ne m’a réellement satisfait, parce que l’on ne trouve quasiment pas d’exemples d’applications concrets, en dehors des exemples issus de la documentation.
Je souhaiterais me fixer une opinion, en répondant aux deux questions suivantes:

  • Les frameworks sont-ils vraiment utiles?
  • Lequel choisir?

La seule façon de répondre à ses questions et de les utiliser dans un cas pratique.

Comparatif des frameworks

Je vais donc comparer les trois produits que l’on retrouve le plus souvent dans la littérature:

Le principe est simple: j’ai trois designs à faire, je vais donc utiliser alternativement les trois frameworks pour les réaliser. Je vous livre ensuite,

  • Des commentaires et mon opinion générale,
  • Les sources correspondants pour vous faire un opinion sur la propreté, la complexité du code.

Les trois designs sont les suivants:

Layout 1 Layout 2 Layout 3
Design cible Structure 1 Structure 2 Structure 3

Quelques commentaires:

  • Utilisez un framework, même le plus simple, suppose des connaissances en HTML et CSS, et la pratique de l’anglais (les docs ne sont pas traduites),
  • Les trois frameworks testés sont utilisables « librement »:
    • BluePrint est publié sous les deux systèmes MIT et GPL,
    • Yahoo YUI est disponible sous BSD License,
    • YAML utilise Creative Commons 2.0. Attention à l’utilisation de ce produit dans le cadre d’un projet commercial.
  • Je ne suis pas un professionnel du développement Web, et je découvre les trois produits. Donc merci d’être indulgent sur la qualité du code fourni. Si vous maîtrisez déjà le produit, et que mon code n’est pas optimisé pour l’un d’eux, merci de me le signaler.
  • L’objectif n’est pas d’obtenir des designs finalisés, directement utilisables. Il s’agit plutôt de tester la facilité de conception d’une structure donnée, et d’effectuer quelques personnalisation pour tester la souplesse du framework: les designs obtenus resteront assez grossiers.

Références

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)

3 thoughts on “Les frameworks CSS”

Laisser un commentaire

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