Un framework CSS hybride

L’étude des frameworks CSS m’a permi d’étudier quatre frameworks: BluePrint, Yahoo YUI, YAML, et plus rescemment 960 System Kit. J’ai écarté YAML, trop complexe à mon goût, et 960 System Kit, trop rudimentaire. Entre Yahoo YUI et BluePrint le choix est plus compliqué: le point fort du premier est plutôt sa feuille de styles de positionnement (la grille), alors que le second se révèle plus intéressant pour les styles typographiques.

A priori, il semble difficile (voir déconseillé) de mélanger les éléments de différents frameworks: les styles de grille et de typographie sont parfois liés, et il y a le risque de perdre la cohérence de l’ensemble. Pourtant la tentation est grande … j’ai donc essayé.

Avec quelques modifications, il est possible de construire un framework CSS hybride, utilisant la grille de Yahoo YUI, et la typographie de BluePrint.

Au moment du choix, j’ai longtemps hésité entre les deux frameworks Yahoo YUI et BluePrint. Les deux frameworks sont accesssibles, et agréables à utiliser. Pour les styles de positionnement, BluePrint see révèle être assez rigide. Côté typographie (rythme vertical), Yahoo me pose quelques problèmes: dans beaucoup de cas, il faut positionné des propriétés (margin, padding …), juste pour compenser celles définies dans les styles du framework. Ces petits soucis viennent autant des styles typographique, que des styles de reset.

Le framework idéal serait donc constitué

  • des styles de reset et de typographie de BluePrint,
  • des styles de grille de Yahoo YUI.

Réalisation

Les premiers essais consistent simplement à utiliser (dans cet ordre),

  • Les feuilles de styles reset.css, et typography.css de BluePrint,
  • La feuille de styles grids-min.css (ou grids.css) de Yahoo YUI

Les premiers résultats ne sont pas très concluants, principalement avec Internet Explorer 6: la largeur de la page, fixée à 750px, passe à 690px !

Un rapide examen de la feuille de styles grids.css montre que les largeurs sont indiquées en em. Cela veut dire que la largeur de la page dépend de la taille de la police de caractères. Ce problème concerne les styles doc, docx (x=2 à 4) et yui-ty (y=1 à 7).

Hors la taille des caractères est de 13px par défaut avec YUI, mais de 12px avec BluePrint. D’où la différence de largeur.

Pour modifier la feuille de styles, nous avons deux possibilités:

  • Remplacer les dimensions indiquées en em (principalement width, margin-left et margin-right) par les valeurs en pixels. La formule est
    Valeur en pixel = 13 * (valeur en em)
  • Remplacer ces mêmes dimensions par des valeurs toujours en em, mais recalculées avec la taille de caractères de base de BluePrint qui est de 12px. Le calcul est Valeur en pixel = 13/12 * (valeur en em)

Donc au lieu d’avoir une ligne du type

#doc2{
   width: 73.076em;
  *width: 71.25em;
}

Nous aurons, dans le premier cas:

#doc2{
  width: 950px;
}

et dans le second cas:

#doc2{
   width: 79.1657em;
  *width: 77.1875em;
}

Il faut reproduire l’opération pour un vingtaine de fois, et le tour est joué. Vous pouvez maintenant utiliser la feuille de styles grids.css de Yahoo YUI, sans avoir besoin des feuilles de styles typographiques associées.

Pour ceux que cela intéresse, voici le fichier modifié:

Le fichier basé sur les dimensions en pixels peut être utilisé quelle que soit la taille des caractères employés dans les autres feuilles de styles. Par contre, les dimensions exprimées en em ne sont valables que pour une police dont la taille de base est 12px.

Commentaires

Le framework hybride obtenu fonctionne correctement: il est utilisé pour la construction de ce thème. J’ai choisi de garder les dimensions en em pour ne pas avoir de problèmes de redimensionnement.

Comme indiqué dans la conclusion des tests, cet article montre bien que les frameworks sont suffisamment simples, pour que nous puissions les adapter à nos besoins.

Cet article montre également tout les difficultés que vont rencontrer les frameworks CSS pour s’imposer: les web designers et les développeurs, ont souvent une idée précise de ce qu’ils veulent obtenir. Ils ont aussi des « habitudes », des « conventions » liés à leurs goûts, leurs expériences … Même s’il remplit parfaitement son rôle, un framework ne sera adopté que si tous ses composants le sont, ce qui me semble difficile.

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)

Laisser un commentaire

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