Les frameworks CSS responsive design

11 Juil 2014 6

Dans un article précédent, je vous indiquais pourquoi le responsive design est indispensable au succès de votre projet Web. Aujourd’hui, nous voyons les frameworks CSS libres et gratuits permettant de mettre en oeuvre un design adaptatif !

La liste ci-dessous n’est pas exhaustive mais recense les principales librairies open-source que vous pourrez utiliser pour faire des responsives. L’autre solution est de faire du responsive à la main en utilisant les media queries, introduites par CSS3, mais c’est une autre histoire que nous verrons plus tard… Pour l’heure, place aux frameworks CSS !

10 frameworks CSS pour faire du responsive web design

1. Bootstrap

bootstrap_responsive-designOn ne présente plus Bootstrap qui, entre de nombreux autres composants, propose un système de grid layout pour faire du responsive. http://getbootstrap.com/

2. Web Starter Kit

web-starter-kit_responsive-designUn kit de démarrage rapide sorti en 2014 par les équipes Google permettant d’adapter les contenus à tous les périphériques, mais également proposant un kit CSS pour votre site Web. https://developers.google.com/web/starter-kit/

3. Gumby

gumby_responsive-designGumby propose un kit complet de composants CSS ainsi qu’un grid layout reponsive très simple.
http://gumbyframework.com/

4. Foundation

foundation_responsive-designFoundation est un framework CSS ultra complet proposant un grid layout responsive et de nombreux composants d’UI.
http://foundation.zurb.com/

5. Responsive Grid System

responsive-grid-system_responsive-designUltra léger, Responsive Grid System se présente comme un kit de démarrage rapide groupant des CSS en fonction de vos besoins, ni plus ni moins.
http://www.responsivegridsystem.com/

6. Skeleton

skeleton_responsive-designComme ses petits copains, Skeleton vous fournira une ossature robuste pour votre site Web responsive.
http://www.getskeleton.com/

7. KNACSS

knacss_responsive-designKNACSS est un framework CSS simple, rapide, puissant avec un logo en forme de saucisse. Et ça, j’adore…
http://www.knacss.com/

8. HTML5 boilerplate

html5-boilerplate_responsive-designHTML5 boilerplate combine un ensemble de composants et pratiques à utiliser pour la création de votre site Web responsive avec un design « passe partout ».
http://html5boilerplate.com/

9. Pure

pure_responsive-designPure est un « petit » framework CSS modulaire ultra léger : 4.4Ko en gzip !
http://purecss.io/

10. Cascade framework

cascade-framework_css-responsive-designCascade framework propose, comme son nom l’indique, d’utiliser au maximum les propriétés en cascade afin de construire ses design templates.
http://www.cascade-framework.com/

Vous voilà désormais armé pour créer les templates de votre projet en design responsive ! Le choix du framework se fera principalement selon vos préférences personnelles. N’hésitez pas à en débattre dans les commentaires. 😉