Les framework CSS pour développer des sites plus rapidement

Après cette longue absence, je reviens avec une méthodologie que j’intègre peu à peu dans les conceptions web : les frameworks CSS et la notion de Grid. Il existe des frameworks pour développer plus rapidement en Ajax, PHP, Javascript ou en HTML. Mais depuis 6 mois les frameworks CSS ont connu une nouvelle expension. Pourquoi ces outils sont-ils tendances? Peut-être parce qu’ils simplifient la création des pages en proposant une nouvelle façon de travailler. Petit tour d’horizon.

Piqure de rappel

Les feuilles de style CSS (Cascading Style Sheets) permettent de travailler sur le design des pages. Elles assurent une meilleure accessibilité, évolutivité et optimisent également le chargement des pages. Les frameworks CSS sont une collection de feuilles de style qui nous permettent de concevoir rapidement une mise en page aussi bien pour un template simple (header, 2 colonnes, footer) que pour des modèles de page complexes (header, multi-colonnes, multi-bloc, elastique, footer).

J’ai découvert il y a quelques mois le système de Grilles (Grid System) qui présente de nombreux avantages :

• Normalisation des placements : tous les éléments sont placés selon des tailles de bloc et non des pixels
• Uniformité : les grilles fournissent une cohésion dans le placement des différents éléments
• Maintenance : elles réduisent le temps de développement lors de la redéfinition de certains styles visuels ou de repositionnement d’éléments
• Efficacité : elles sont cross-browser; elles sont testées et sont compatibles sur la plupart des navigateurs actuels et anciens

Etat des lieux des framework CSS

Les frameworks qui sortent du lot sont :

• Blueprint
• 960 Grid System
• YUI Grid CSS
• SenCSs

A ce jour, le plus répandu est surement Blueprint car il a une grosse communauté qui pousse le projet en l’utilisant et en créant des modules. Après je mettrai 960 Grid System et YUI Grid CSS au deuxième plan. Les deux frameworks sont différents mais possèdent une bonne aura et beaucoup de développeurs les ont adoptés. Enfin SenCSs est un framework CSS qui ne gère pas la mise en page mais les styles, à découvrir comme tant d’autres. Il existe en effet de plus en plus de framework CSS, en voici une liste de 45 avec quelques générateurs.

Une fois le pas franchi…

Dès que vous aurez choisi un système de grid, c’est comme l’adopter. Le code HTML et les balises CSS ne changent pas fondamentalement, ils évoluent. En revanche les frameworks CSS sont très différents les uns par rapport aux autres. Il vous faudra quelques heures ou quelques jours pour être capable de bien les cerner. Et vous avez-vous franchi le pas avec les frameworks et les Grids ?

Pour aller plus loin

• Les frameworks CSS : Cet article d’Emmanuel Georjon date de 2008 mais explique très clairement le concept de Grid.
• The Best Fluid CSS Grid : Un article sur le deisgn fluide à l’aide de Grid
• Which CSS grid framework ? : un article qui compare les différentes solutions pour créer des sites à base de framework
• Yahoo Builder : Un générateur qui permet de créer en 2 coups de cuillère à pot un modèle de page basé sur YahooUI (YUI)
• BluePrint CSS Builder : Une version similaire de générateur pour BluePrint
• Designshack Grid : Une section de cette galerie renferme de jolis sites réalisés à base de grid