Les framework CSS pour développer des sites plus rapidement

Le 22 septembre 2009

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 :


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

Envie de discuter de cet article ? Envoyer un message sur Twitter ou envoyez-moi un e-mail. Si cet article vous a plu, n'hésitez pas à le partager sur Twitter ou Facebook.

7 Commentaires sur "Les framework CSS pour développer des sites plus rapidement"

  • Les framework CSS ? | SPonline
    23 septembre 2009 (3:28)

    […] entendu parlé des framework mais jamais de framework CSS, c’est grâce à ce billet “Les framework CSS pour développer des sites plus rapidement” qui m’a lancé dans une recherche sur le […]

  • Statistiques du mois de Septembre | Autour d'un café
    4 octobre 2009 (2:07)

    […] Geek, Autour du Web, Blog du modérateur, Blogue de Geek, Eclaireur.net, Eric Reboisson’s Blog,Fabuzz, Goudie.biz, Helran, JarodxXx, Klakinoumi, Le Tour du Web, Origasmik, […]

  • Twitted by programmateur
    5 octobre 2009 (18:05)

    […] This post was Twitted by programmateur […]

  • Twitted by thomasgerault
    13 octobre 2009 (12:35)

    […] This post was Twitted by thomasgerault […]

  • Twitted by agentit
    30 octobre 2009 (8:51)

    […] This post was Twitted by agentit […]

  • Jeune gay
    13 février 2011 (0:25)

    Je vous conseille le framework formee simple et facile à prendre en main ^^

  • Maunel
    3 janvier 2012 (11:19)

    Interessant, j’avais un peu de mal avec la notion de framework css mais après avoir jeté un oeil ça peut faire gagner du temps. Merci pour les références 🙂