Framework CSS: test de YAML

Avec un peu de retard, je termine la série de tests sur les framework CSS par un outil d’origine allemande: YAML (Yet Another MultiColumn Layout). Le test de ces deux concurrents, BluePrint et Yahoo YUI ont montré des concepts et des fonctionnalités très différentes. YAML proposera-t-il une troisième voie? Nous allons rapidement le découvrir.

Premier contact

J’avoue avoir rencontré quelques difficultés à comprendre le principe de fonctionnement du framework, à tel point qu’il a faillit ne pas apparaître dans le comparatif. Avec BluePrint et Yahoo YUI, il suffit de survoler la documentation (quand elle existe), et de passer rapidement à l’analyse des exemples. Avec YAML, il faut commencer par BIEN lire la documentation, et JUSQU’AU BOUT.
Si quelqu’un a déjà utiliser ce framework, je serais intéressé de savoir s’il (si elle) a rencontré les mêmes difficultés.
Logo de YAML
Le site est très clair, précis: on sent la rigueur germanique ;-). Tous les liens pour commencer sont clairement identifiés. Rien à dire.

YAML reprend les fonctionnalités de ses deux concurrents: styles typographiques, et styles de positionnement. Mais le produit contient également des feuilles de styles pour des listes et des menus.

Le fichier ZIP contenant le framework se compose de

  • d’un assez grand nombre de feuilles de styles pour l’écran, pour l’impression,
  • de feuilles de styles dédiées Internet Explorer,
  • de fichiers « modèles » ou « de base » HTML et CSS,
  • d’un assez grand nombre d’exemples.

L’archive n’inclut pas la documentation qu’il faut télécharger ICI.

Documentation

La documentation est très complète, et très bien faite … une fois que l’on a compris le principe.
La première partie est longue, trop longue: les auteurs vont assez loin dans les détails, en expliquant les concepts de blocs flottants etc…

On se demande où ils veulent en venir exactement, et puis tout fini par s’éclaircir au chapitre Practice. Je conseille donc à ceux qui veulent se lancer, de commencer par ce chapitre, et de lire les autres ensuite.

L’utilisation

L’utilisation du framework est assez différente des deux précédents:

  BluePrint / Yahoo YAML
Fichier HTML – Démarrage « page blanche »
– Empilement « libre » de blocs
– Utilisation d’un fichier modèle
– Les blocs principaux existent déjà, il faut les positionner, ou les cacher.
Fichier CSS – Utilisation des feuilles de styles standards,
– et ajout d’une feuille de styles perso pour les modifications éventuelles.
– Utilisation des feuilles standards,
– Feuilles de styles de personnalisation également proposées sous forme de modèle à compléter.

avec BluePrint ou Yahoo YUI, la construction d’un layout consistait à partir d’une feuille blanche, et à « empiler » les blocs en suivant quelques règles simples. Avec YAML, la structure de base existe déjà: elle inclut un certain nombre de blocs, comme le montre l’image ci-dessous:
Structure d'une page YAML
Concevoir la structure d’une page comporte deux étapes:

  • Phase 1: on modifie les styles des blocs de positionnement (styles #col1, #col2, #col3), pour les faire apparaître ou disparaître, pour les placer à gauche, à droite, en haut, en bas …
  • Phase 2:une fois le positionnement effectué, on entre dans une phase plus classique, en créant des blocs de contenu. Ces blocs sont associés à des classes du type c50l et c50r, ce qui veut dire respectivement, bloc flottant aligné à gauche (left) de largeur 50%, et bloc flottant aligné à droite (right), de largeur 50%. Dans le même esprit, on trouve des classes du type c33x, c66x, c25x, c75x ...

YAML pousse beaucoup plus loin que YUI, le concept de design variable: il permet de radicalement transformer le design du site, avec un minimum de modification au niveau des feuilles de styles. Quelque soit le design souhaité, une page YAML contient tous les blocs de la figure présentée ci-dessus. En modifiant les propriétés de ces blocs, notamment #col1, #col2 et #col3.

Différents designs obtenus avec YAML

Pour résumer, la sidebar située à droite peut passer à gauche, en bas ou en haut de page, en deux minutes chrono, et sans avoir besoin de toucher au contenu. Les modifications sont cependant plus « lourdes » qu’avec Yahoo YUI. Avec ce dernier, il suffisait de changer le nom d’un style. Avec YAML il faut modifier les styles eux-mêmes. Cette méthode donne plus de souplesse, mais elle est clairement plus complexe. Elle oblige à bien comprendre le framework lui-même, et à bien maîtriser les blocs CSS flottants.

La seconde phase (blocs de contenu) est plus classique. J’ai apprécié la nomenclature des styles, qui permet de savoir ce que fait le style simplement en lisant son nom (c33r est un bloc de largeur 33%, flottant aligné à droite).

YAML offre également des styles pour construire des menus du type Sliding Door (voir A List Apart), des listes ou des tables.

YAML n’est pas sans défaut:

  • Il y a trop de feuilles de styles à gérer: il faut avoir près de 4 feuilles de styles pour faire un design (sans compter les feuilles standards),
  • Le framework n’est pas accessible au commun des mortels. Il demande des connaissances certaines des styles CSS, notamment des blocs flottants,
  • Les conditions d’utilisation ne sont pas claires.

Ce dernier point reste en effet très flou:

  • Dans le pied de page, les auteurs parlent de Opensource Project,
  • Dans la page de licenses, ils parlent de Creative Commons dont le mode choisi n’interdit pas d’utilisations commerciales,
  • Dans la même page, les auteurs donnent les prix pour des licenses commerciales: 60$ pour un projet, et 120$ en illimité.

Quoiqu’il en soit, il apparaît clair que YAML demande au minimum l’affichage de son nom pour une utilisation gratuite. Il faut donc rester très prudent si ce framework doit être utilisé à des fins professionnels ou commerciales.

Le tableau ci-dessous donne les liens vers les pages obtenus, 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
Résultat YAML Layout 1 YAML Layout 2 YAML Layout 3
Sources Fichiers du test

Comme ses deux concurrents, YAML dispose d’un générateur de code (qui ne fonctionne pas avec Internet Explorer !).

Commentaires

J’avoue être assez partagé:

  • YAML est certainement le plus complet des frameworks, mais il est également le plus complexe à utiliser,
  • Il semble très rigide, en imposant une structure de page spécifique, le nombre et même le nom des feuilles de styles, mais l’utilisateur est libre de modifier les styles comme il l’entend.

Personnellement, je n’utiliserai pas ce framework pour deux raisons: sa complexité, et les ambiguïtés aux niveaux des licences.

Pour ceux qui maîtrisent les styles CSS, YAML possède des qualités indiscutables: il est complet, et les designs obtenus sont robustes. Sa faculté de transformation, le rend intéressant pour des développements demandant une certaine souplesse de configuration. Il pourrait, par exemple, servir de base aux développements de nouveaux thèmes WordPress du type Sandbox, et K2.

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: test de YAML”

  1. Excellent article, merci.
    Mais je ne sait toujours pas quoi faire avec la library télécharger sur mon bureau…
    Le générateur de code ne me permet pas de télécharger mon template en une seul fois, je peu seulement copier le code par fragment, ((X)HTML Code ), ( my_layout.css ) ( basemod.css ) ( ect.. ). Cela me semble un peu fastidieux pour un débutant.

Laisser un commentaire

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