Test du Framework CSS 960 Kit

Le dossier sur les framework CSS ne devait initialement être composé que de trois tests (BluePrint, Yahoo YUI et YAML). Entre temps, j’ai découvert un peu par hasard, un framework qui reprend le concept utilisé par BluePrint: 960 Grid System. Il me semble intéressant de compléter le dossier avec le test de ce framework.

Premier contact

Comme pour BluePrint, le site de 960 est minimaliste. il s’appuie surtout sur des exemples. L’archive ZIP contient également le minimum: les feuilles de styles, un unique fichier de “démo”, et quelques grilles qui peuvent être utilisées avec différents logiciels.

Le kit propose trois feuilles de styles:

• 960.css contient tous les styles de positionnement (structure, blocs …),
• text.css regroupe tous les éléments de typographie,
• reset.css permet de supprimer toutes les propriétés par défaut des éléments HTML standards.

Un seul fichier d’exemple est proposé, il faut donc partir de là pour démarrer notre premier design.

Documentation

Aucune.

Utilisation

960GS est tout à fait comparable à BluePrint. Le framework est simple, et facilement accessible, parce qu’il repose sur un principe simple, et un nombre restreint de styles.

Le kit propose

• Des styles container_xx découpant la largeur de la page (de 960px) en 12 ou 16 colonnes,
• Des styles grid_x pour décrire la structure de la page. On indique un nombre de blocs, chaque bloc ayant une largeur multiple de 80 ou 60 pixels, avec toujours 10px de marges à droite et à gauche,
• Les styles prefix_x permettent de décaler ces blocs vers la droite, tandis que les styles suffix_x sont chargés des décalages vers la gauche.

La principale (l’unique?) différence avec BluePrint se situe au niveau des marges, qui sont réparties à gauche et à droite (uniquement à droite pour BluePrint).

La feuille de style text.css est aussi complète que celle de BluePrint. Les tailles de caractères et les interlignes sont cependant définis en pixels, ce qui interdit tout redimensionnement propre.

Commentaires

960 Grid System est globalement un clone de BluePrint. Par rapport à ce dernier, il souffre de quelques défauts:

• Toutes les dimensions sont indiquées en pixels: taille des blocs, taille des caractéres …
• La communauté est beaucoup moins importante, et les ressources disponibles sont moins nombreuses.

Il faut donc attendre encore que le produit gagne en maturité avant de l’adopter.

Articles de la même série

1. Les frameworks CSS (14 Apr)
2. Framework CSS hybride (08 Jul)
3. Test du Framework CSS 960 Kit (Cet article)
4. Frameworks CSS: Conclusion (28 Jun)
5. Framework CSS: test de YAML (23 Jun)
6. FrameWork CSS: Tests de BluePrint v2 (18 May)
7. Test du framework CSS Yahoo YUI (17 May)
8. Test du framework CSS BluePrint (19 Apr)