Developpez.com

Le Club des Développeurs et IT Pro

Zurb Foundation 4 sort

La boite à outils CSS/JavaScript simplifie le « Responsive Design » avec sa nouvelle approche « mobile-first »

Le 2013-03-22 17:45:21, par Hinault Romaric, Responsable .NET
Une nouvelle version majeure de la boite à outils CSS/JavaScript Zurb Foundation a été publiée récemment par ses développeurs.

Pour rappel, Foundation est un framework CSS qui permet de concevoir rapidement des interfaces Web « responsive » fluides et réactives. Cette technique permet de créer une seule interface qui s’adapte automatiquement aux tailles d’écrans des différents appareils (PC, tablettes, smartphones, etc.).


Le framework propose des fonctionnalités comme un système de grilles pour le positionnement des éléments en CSS, un système de layout responsive pour adapter le site aux différents navigateurs web et mobiles, des éléments d’interfaces (onglets, tableaux, etc.) et bien plus.

Cette quatrième version dont le code a été quasiment réécrit introduit la nouvelle approche « mobile-first ». Cette nouveauté permettra de bénéficier d’un meilleur affichage des pages sur les terminaux mobiles. Pour l'instant, seul Internet Explorer 8 ne supporte pas cette fonctionnalité.


De nouveaux plugins JavaScript font leur apparition avec cette mouture et ceux existants sont désormais plus rapides et robustes. On note également une migration vers Zepto, la bibliothèque JavaScript légère compatible jQuery.

En outre, une nouvelle fonctionnalité « mixins » puissante est disponible avec la version SASS (Syntactically Awesome Stylesheets). Elle permet d'utiliser les « grid tools » de Foundation 4 sans alourdir le code HTML de la page avec des noms de classes de la grille.

Il est possible de se procurer Foundation v4 de trois manières distinctes. La première consiste à télécharger la version de base de Foundation CSS depuis le site officiel. La seconde à télécharger une version customisable en ligne. Enfin la troisième à se procurer la version SASS de celle de base.

Un guide est disponible sur le site officiel pour faciliter la migration de la version 3 de Foundation vers la version 4.

Télécharger Foundation 4

Le code source sur GitHub

Et vous ?

Avez-vous recours au responsive design dans vos projets ?

Que pensez-vous de Foundation ? Allez-vous l’utiliser ?

Quelle(s) autre(s) solution(s) offrant les mêmes outils utilisez-vous ?
  Discussion forum
4 commentaires
  • michel.di
    Membre éprouvé
    Personnellement je ne connaissais pas mais je vais tester ça
  • rodolphebrd
    Expert confirmé
    C'est l'outil que je conseille plutôt que Bootstrap.
  • camus3
    Membre éprouvé
    Bootstrap est bien plus simple à utiliser et personnellement je préfère LESS à SASS.

    Bootstrap est bien plus soutenu que Zurb qui reste relativement peu utilisé par rapport au premier.
  • rodolphebrd
    Expert confirmé
    Zurb est en train de monter et offre une alternative à Bootstrap qui est repérable entre mille.

    Zurb offre plus de souplesse dans le design.

    La différence entre les 2 en terme de techno se vaut et se justifie selon les goûts.