Les frameworks CSS responsive design

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. 😉

  • jff
  • Larevich

    Article très intéressant, cela dresse le panorama des Frameworks CSS populaire actuel :).

    Dans le genre « framework light », il y a http://www.slim-css.com/ qui est un petit nouveau dans le paysage. Il vaut le coup d’y jeter un oeil.

  • Pingback: Optimiser un traitement d’import ou batch PHP()

  • drab

    A part KNACSS pour aller avec les galettes ;), lequel de ces frameworks a ta préférence ?

    • Nicolas Hachet

      En réalité, ils sont tous assez similaires, même si certains proposent plus qu’une simple CSS responsive…
      J’aime bien « Web Starter Kit » le dernier né de Google. Sinon je trouve que Pure est sympa car léger et très simple. Sinon, Bootstrap, Foundation ou Gumby propose tout un tas de composants bien sympathiques… 😉

      Pour faire son choix, c’est comme les frameworks PHP, c’est avant tout une questions de goût personnel !

  • doydoy44

    Merci beaucoup pour cet article.

    J’ai apprécié le dernier mais la dernière partie (« Non, vous n’avez pas d’excuse pour ne pas penser au design responsive. D’autant plus que les frameworks CSS vous aidant dans cette tâche sont légions ! ») m’avait laissé sur ma faim.

    Je ne les connaissais pas tous, je vais donc jeter un coup d’œil à ces framework. 🙂

    • Nicolas Hachet

      C’était en prévision du prochain, c’est aussi pour ça que j’ai posté celui-ci rapidement… 😉

  • Pingback: Projet Web : pourquoi le responsive design devrait être votre priorité ?()