Les framework CSS

Les framework CSS

Vous n’êtes ni ergonome ni graphiste et vous souhaitez tout de même faire site ou une application web avec une version mobile qui n’est pas trop moche et cela sans trop vous casser la tête ? Plusieurs projets existent pour vous simplifier la vie. Il faudra bien sur avoir quelques notions de HTML sinon vous allez très rapidement vous casser les dents. Chacun des frameworks dont je vais vous parler est populaire, maintenu, évolutif, documenté et avant tout gratuit et open source, vous pourrez donc faire profiter la communauté de vos améliorations ou bien en faire votre propre version dans une branche distincte. Ces frameworks ont aussi une dépendance plutôt forte avec HTML5 et CSS3.

Foundation

Ce framework est très simple à prendre en main, il vous suffit de télécharger le CSS et de l’intégrer dans votre page HTML et vous avez déjà réalisé le plus compliqué. Pour la suite il vous suffira de vous référer à la documentation de manière à affecter la bonne classe au bon élément. Il est possible d’intégrer des modules JavaScript, qui sans code complémentaire viendra ajouter des fonctionnalités à certains éléments mais le framework peut parfaitement fonctionner sans. Maintenant, si l’esprit du programmeur vous habite, il sera possible de récupérer non pas la version CSS de Foundation mais son code Sass. Sass signifie « Syntactically Awesome Style Sheets », c’est un langage de programmation qui génère du CSS tout comme son concurrent {% post_link simplifiez-votre-css-avec-less LESS %}.

Bootstrap

Créé par deux développeurs de twitter, ce framework mêle simplicité d’apprentissage et une compatibilité bluffante. La documentation est énorme et la communauté très active. Côté code Bootstrap est disponible en CSS mais aussi en {% post_link simplifiez-votre-css-avec-less LESS %} et Sass ce qui vous laisse un large choix de technologie. Cette fois encore la partie JavaScript n’est pas nécessaire mais ajoute beaucoup d’éléments très sympathiques comme les fenêtres modales, les onglets, les tooltip et bien d’autres.

Customisation

Quand je vous ai dit que c’était du tout cuit, je vous ai un peu menti, car si vous utilisez un CSS tout prêt, votre site/application va ressembler voire même être identique à celui/celle de votre voisin. Pour éviter cela il est possible de customiser votre version du framework, chez bootstrap il y a une interface pour changer les couleurs et définir certains paramètres. Pour Foundation, il existe aussi une interface beaucoup plus simple qui permet d’aller à l’essentiel.

TD;DR

Ces deux frameworks font à peu de choses près la même chose, le seul vrai changement se trouvera au niveau des classes que vous allez utiliser. Pour ma part j’ai utilisé les deux et je dois avouer une légère préférence pour Bootstrap.

Vous trouverez toutes les références nécessaires pour bien commencer ici :