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 :