Framework CSS : l’avenir des CSS

A l’origine, un framework fournit un ensemble de fonctions facilitant la création de tout ou d’une partie d’un système logiciel. Ici, il s’agit d’intégrer au maximum les briques de mise en forme – les « Grid » (« Grilles ») – pour développer plus rapidement en Ajax, PHP, Javascript ou en HTML

Appliqué aux CSS, l’effet est garanti : Template simple (header, 2 colonnes, footer) ou modèles de page complexes (header, multi-colonnes, multi-bloc, elastique, footer), le développement est largement facilité.

A première vue, cette évolution est mineure, mais en fait, elle va révolutionner votre manière de travailler. Rappelez-vous ce qu’était le web avant les CSS… Bienvenue dans La Grille, Néo

Que contiennent ces frameworks ?

A l’origine, les grilles étaient utilisées en presse, pour placer les éléments de la maquette dans une matrice ordonnée. Elles ont été « récupérées » par les webdesigners, toujours à la recherche de la meilleure équation design/mise en forme.

Les framework CSS sont constitués des éléments suivants :

• 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).

Rien de bien nouveau me direz-vous ? A première vue, non. Et pourtant, il s’agit ici de « gommer » les soucis de positionnement CSS ou de compatibilité du code avec les navigateurs, très chronophages … Et petit plus, la structure globale des CSS est plus lisible.

^ Haut de page ^

Quels sont les avantages des systèmes de Grilles (Grid System) ?

• Des blocs ordonnés par tailles de bloc et non par pixels
• Des éléments placés de manière cohérente
• Une maintenance simplifiée, notamment lors de la redéfinition de certains styles visuels ou de repositionnement d’éléments
• Une compatibilité sur la plupart des navigateurs (y compris les générations anciennes)
• Une application simplifiée de la « règle des trois tiers » et la « section d’or » pour la conception, qui se traduit par une mise en page visuelle attrayante pour la plupart des yeux humains.
• Les « sous-grilles », qui facilitent la production de pages plus complexes.
• La mise en forme des images et légendes de texte pour produire des mises en page asymétriques.
• La production de mises en page Web valorisantes, sans coder les CSS à partir de zéro.
• La compatibilité avec toutes formes de sites, y/c les sites statiques
• La création de « magazines en ligne » sur les plates-formes de blog. Voyez le succès de WordPress, qui s’appuie largement sur ce concept.

^ Haut de page ^

Quel framework choisir ?

il existe plusieurs frameworks CSS, dont voici les plus connus. Choisissez votre framework avec attention, car l’apprentissage peut être long : la documentation est en anglais et soyez prêts à changer vos méthodes de travail…

• Le leader : Blueprint
  Il dispose d’une grande communauté de dévleoppeurs et avance donc rapidement (nombreux modules)
• Les suiveurs : 960 Grid System, YUI Grid CSS
  Adoptés par de nombreux développeurs, ces frameworks sont également promis à un bel avenir
• Un petit dernier, SenCSs, qui est en fait un générateur de styles (mais pas de mises en page)

Vous souhaitez les découvrir tous ? En voici une liste très exhaustive (plus de 40 frameworks)

^ Haut de page ^

Pour aller plus loin

• L’excellent site A list Apart
• Quatre articles très documentés : La structuration en grille avec BluePrint Grid CSS, un article référent sur les grilles sur Pixenjoy, The Best Fluid CSS Grid et enfin Which CSS grid framework ?, qui compare les différentes solutions pour créer des sites à base de framework
• Deux générateurs de grilles : Yahoo Builder, pour un modèle de page basé sur YahooUI (YUI) et un générateur de grilles Blueprint
• et enfin, quelques exemples de grilles sur Designshack Grid

^ Haut de page ^