La compatibilité sur tous les navigateurs : voilà un point qui (a) fait cauchemarder plus d’un développeur web. Heureusement, les navigateurs se rapprochent de plus en plus des standards (même si rien n’est encore gagné), et côté JS on a vu apparaître des librairies qui ont pris en charge cette gestion de la compatibilité. Au niveau CSS également, des framework existent depuis plusieurs années et permettent de gérer la compatibilité, mais également le positionnement à l’heure où l’on parle également beaucoup de « responsive design ». L’occasion de voir ce qui existe dans ce domaine.
Je suis actuellement en train de faire le tour des framework CSS car je compte en utiliser un dans un développement perso à venir. Du coup, j’ai essayé de faire un tour le plus complet possible des solutions existantes avant de faire un choix définitif (ce choix n’est pas encore fait).
Avantages des framework CSS
Ces framework vont :
– gérer la compatibilité sur les différents navigateurs (reset CSS)
– faciliter le positionnement CSS (« grille » CSS)
– faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design)
Cela permet donc de vous libérer de contraintes techniques peu intéressantes et de vous consacrer pleinement au design de votre site. Quand on s’est battu avec le positionnement CSS, et qu’on joue ensuite avec une grille CSS, c’est un brai bonheur 🙂
Les solutions disponibles
Il existe maintenant de nombreux framework disponibles sur le marché. L’idéal est d’en essayer quelques uns pour voir lequel correspond le mieux à vos habitudes et votre projet. Il faut notamment voir de quelles fonctions vous aurez besoin, car les framework sont plus ou moins simples et légers.
– Knacss : sans doute le plus léger. Il a été créé par Raphaël Goetter, fondateur d’Alsacreations dont nous avons déjà dit du bien dans ces pages. Il se compose en fait d’une simple feuille CSS à intégrer dans vos projets et qui vous servira de base. Vous pourrez trouver le code commenté (utile pour comprendre et apprendre) et aussi une galerie de réalisations utilisant Knacss.
– Blueprint CSS : là c’est un framework plus complet, qui permet de gérer une grille, mais également la typographie et les formulaire. Vous pourrez trouver sur le site des démos ainsi qu’un lien vers le wiki où vous trouverez des tutoriaux, des plugins et des thèmes.
– 960 Grid System : vous trouverez sensiblement les mêmes fonctionnalités qu’avec Blueprint. A noter que dans le « package » se trouve des plugins pour Photoshop et Fireworks.
– Kube : Peut être un peu plus simple d’accès, il propose des positionnements en grille avancés. Vous pourrez trouver un tutoriel en français sur la ferme du web.
– Bootstrap : un framework CSS très complet développé par Twitter. Vous trouverez un tutoriel très complet sur le site du zéro.
Je n’ai pas fait le tour de tous les framework. Si vous voulez une vue de l’ensemble des framework CSS, vous pouvez visiter ce lien qui vous donnera une liste quasi exhaustive de framework, et ce qu’ils proposent comme fonctionnalités.
Avez vous de votre côté des retours d’expérience sur ces différents framework ? Si oui, quels sont pour vous les avantages et limites de chacun ?
