La puissance des frameworks CSS : convertissez-vous !

Attention, cet article a été posté en 2010. Il est possible que les informations mentionnées ne soient plus d'actualité, ou que mon opinion ait évolué. Merci d'en tenir compte lors de votre lecture.

Développeurs web, vous connaissiez les frameworks Javascript, jQuery en tête, les frameworks PHP, voici maintenant les frameworks CSS. Ces petits outils envahissent votre bureau peu à peu, avec une seule idée en tête : vous faciliter la vie, et optimiser votre temps de développement.

Jusqu'à peu, j'étais allergique à tous ces frameworks ; leur lourdeur et complexité d'apprentissage me donnait des boutons ! Du coup, je privilégiais les frameworks maison, codés avec mes pieds, bien plus adaptés à mes besoins et mes habitudes. Puis, avec le temps, je n'ai pas pu résister au charme de Jquery. Surement à cause de sa fraicheur, et de ses nombreux attributs. Irrésistible.

Et si, aujourd'hui, on s'intéressait aux frameworks CSS ? L'idée est la même : lorsque vous mettez en forme un nouveau site, vous passez votre temps à copier-coller bêtement des bouts de code ou astuces que vous avez déjà appliqué auparavant. Ces mêmes bouts de code qui vous avaient mangé des heures et des heures, avant d'être compatibles avec l'ensemble des navigateurs du marché (IE6 compris ?). Bref, le framework CSS permet de donner une structure à tout ce travail, en ce passant des copier-coller, rechercher-remplacer. Fun, non ?

Prenons un exemple. Blueprint. Avec quelques classes, vous coupez votre espace de travail en 24 colonnes. Puis, vous créez vos menus, blocs, etc. Un bloc de 12 colonnes au centre, deux autres de 6 colonnes de part et d'autre. Deux lignes de code, votre design est sur pieds.

Un exemple peut être ? Regardez cette page. Des blocs par-ci, des blocs par-là, et pourtant, le mettre en place est un jeu d'enfant. Honnêtement, en partant avec une feuille de style vierge, combien de temps auriez-vous mis ? Deux heures ? Peut-être une seule, en négligeant certains navigateurs obsolètes ? Avec le framework, 20 minutes. En comptant la pause café.

Cerise sur le gâteau, Blueprint propose un tas de petits plugins, vous permettant par exemple d'ajouter facilement des boutons, des petits icônes ou même de nouvelles typographies. Bref, une communauté riche, un système de base léger, évoluable à souhait.

Bien entendu, il existe des concurrents. Un des plus connus, 960 Grid System. Niveau fonctionnalités de base, il est largement à la hauteur. Il propose peut être un peu moins de plugins, mais ce n'est pas vraiment dérangeant. Il y a aussi le très bon 52Framework, tourné vers l'avenir en utilisant HTML5 (et ce, depuis un moment). Il est cependant plus complexe à prendre en main.

Bref, à vous de faire votre choix, j'ai fait le mien. Blueprint.

Pour aller plus loin :

Vos réflexions

Bonjour,
J'aurai bien aimé une petite sélection de plugins de ta part justement... Mes petites recherches ne m'ont rien montré de très intéressant...

Personnellement, si je devais utiliser un framework css, c'est blueprint que j'utiliserai car j'avais bien aimé la logique et l'apprentissage était très rapide. Néanmoins, j'ai fait le choix de n'utiliser que la partie typographique... N'étant pas un grand fan des grilles, j'ai supprimé cette partie de mon code CSS.
@Johan : Une sélection de plugins est en effet envisageable. Cependant, je prends tout juste mes marques, je n'ai pas encore eu l'occasion de les mettre en application. Cela dit, tous les plugins sont généralement accompagnés d'une petite démo.

L'un d'entre eux, que je trouve sympa :
http://blueprintcss.org/demos/tabs.html
Salut,

Je ne sais pas si on peut les classer dans la même catégorie mais j'utilise le framework CSS de JQuery UI. D'après ce que je vois Blueprint est beaucoup plus complet.
Mais quid de l'intégration JQuery UI + Blueprint ?
Bonjour et merci d'avoir cité mon blog pour aller plus loin ;) En ce moment, j'utilise un framework qui mélange le meilleur de Blueprint et de 960.gs. Faut que je termine le billet que j'ai en préparation là-dessus.
Salut,

Merci pour l'info, sachant que je vais me remettre à coder après le bac ça pourra mettre utile ce frameworks ;)
@moins52 : Je ne peux pas répondre, je n'utilise pas JQuery UI. C'est d'ailleurs typiquement le genre de lib que je trouve trop lourde, surtout qu'on utilise que 5% de la puissance du core (et encore, heureusement, ils ont fait un truc modulable !).

@Bruno Bichet : Il s'agit d'un framework fait-maison, ou tu as réussi à dénicher une perle rare ?
@Julien Guyomard -- J'ai fait un petit mix maison. Rien de transcendantal, mais certaines choses me gênaient dans ces deux frameworks. Je m'en sers surtout pour la phase de mise en place des éléments et après j'ai tendance à consolider l'ensemble en "dur".
Héhé merci pour le lien vers Websourcing. J'ai d'ailleurs utilisé Boks avant hier, pour enfin débuter mon nouveau design. Et c'est vrai que ça va vite, très vite.

Tu te poses pas de questions avec ces frameworks, tu déroules, c'est ce qui est bien.

@bruno : tu peux nous en dire plus ? Ça m'intéresse (je beta teste ;) )
@moins52 : Ce n'est pas la même cible entre jQuery UI et Blueprint...
jQuery UI permet d'harmoniser une apparence graphique sur tous les navigateurs avec les même comportements.

En gros, si tu veux faire une webapp tu peux utiliser jQueryUI pour être sur que le design sera identique partout et que tu pourras développer des fonctionnalités facilement vue que jQuery UI fourni plein de composants...
Tu m'as vraiment donné envie de tester ça. J'ai vraiment plus de temps sur ces deux prochaines semaines, je crois que je vais en avoir encore moins.
Ce framework a l'air vraiment intéressant. Ca va permettre de gagner pas mal de temps sur des petis sites fait maison je pense.
A essayer!
Je viens de le télécharger, je vais tester pour voir s'il tiens ses promesses.
super info , j' ai vraiment l' impression de débarquer je ne savais même pas que cela existait .
il doit y avoir moyen de gagner du temps ?
C'est une petite merveille. Ca fait maintenant 1 semaines que je l'utilise et ca fait gagner un temps fou sur des tâches de développement pas très intéressantes.
En plus la plupart des frameworks sont assez complexe habituellement, mais là c'est tout le contraire.
Ca va faire des heureux!
le danger des framework, c est que si on veux faire une modif manuellement , ça devient très compliqué. Alors que la puissance du CSS, c'est qd il est écrit le plus simplement possible