ZURB Foundation : le framework CSS pour des frontends responsifs

Depuis 1998, l’agence de design américaine Zurb accompagne les entreprises dans la conception de sites et de services Web de haute qualité. En 2008, les éléments de style développés en interne pour les projets des clients ont été rassemblés dans le ZURB style guide. Deux ans plus tard, Zurb a décidé de créer un framework basé sur ce guide, afin de simplifier la création de prototypes et de réduire le temps de développement. Pour ce faire, les meilleurs snippets de code et les meilleurs modèles ont été extraits et intégrés dans le framework Foundation, qui a été publié en tant que projet open source en 2011, et est depuis disponible gratuitement.

Foundation est un framework frontend responsif, composé d’éléments fonctionnels HTML et CSS pour le design UI, divers snippets de code, des modèles, ainsi que des extensions JavaScript en option. Le framework, modulaire et conçu pour les projets interdisciplinaires, est distribué sous la licence MI, et peut être téléchargé à partir de sa page officielle ou à partir de GitHub. L’approche Mobile First a été prise en compte depuis Fondation 4.0, et l’est depuis dans tous les fichiers des frameworks, grâce à de nouveaux modules variés conçus pour optimiser les performances, ainsi qu’une diminution du poids des fichiers. Outre la version standard de Foundation, Zurb a également conçu des variantes pour le développement de newsletters (Foundation for emails) et d’applications (Foundation for Apps) compatibles avec divers appareils.

Le framework Foundation se caractérise par un haut niveau de flexibilité, qui se traduit par une construction modulable. Il est possible, avant le téléchargement, de choisir les modules dont vous avez ou non besoin: de cette façon, vous pouvez configurer vous-même votre collection de code, sans avoir à télécharger des modules dont vous n’avez pas besoin. Si vous vous rendez compte a posteriori que vous avez besoin d’un autre module, vous pouvez à tout moment le télécharger pour l’ajouter au framework. De la même façon, vous pouvez également supprimer des composants dont vous n’avez plus l’utilité. Ceci vous permet de disposer en permanence des bons modules dont vous avez besoin pour réaliser votre projet Web. 

Pour Foundation 6.0 par exemple, il existe un choix de plus de 40 composants, regroupés en sept secteurs différents :

• Grid : le composant décisif pour un design Web responsif est la grille standard flexible de 1200 pixels de large. Il est certes possible de supprimer également ce module, mais ce système de grille constitue la base d’un design compatible avec divers appareils et diverses résolutions. Depuis la version 6.0, le module existe également en version flex grid, qui permet de positionner les éléments de façon encore plus flexible grâce aux modèles de boites flexbox en CSS (on peut par exemple orienter les objets horizontalement ou verticalement).

• General : les modules généraux (dont la grille fait également partie) comprennent les classes Float et Visibility, grâce auxquelles on peut définir des règles pour le placement et la visibilité des éléments individuels. En outre, on trouve également dans cette section un composant pour les formulaires et un module de typographie, contenant des polices de bases et des options de formatage de texte.

• Controls : c’est ici que se trouvent les éléments interactifs les plus importants de votre projet Web. Il s’agit, par exemple, de boutons qui redirigent le lecteur vers une autre page après un clic, ou qui ferment des éléments sélectionnés. Il existe également des modules permettant d’intégrer des diaporamas, ainsi que des boutons marche/arrêt.

• Navigation : il est bien sur possible qu’il manque des éléments de navigation pour le design du frontend, c’est pourquoi il existe une large sélection de modules pour votre projet ZURB Foundation, grâce auxquels vous pouvez créer des menus (accordéons, menus défilants, listes déroulantes), ajouter des chemins de navigation (breadcrumbs), ou numéroter les pages.

• Containers : les conteneurs constituent la meilleure façon de grouper plusieurs éléments, tels que du texte, des images ou des vidéos, dans une aire commune. Vous trouverez ici des styles pour les contenus typiques d’éléments tels que les accordéons, les onglets, les listes déroulantes et les fenêtres de dialogue modales.

• Media : dans la rubrique media se trouvent les modules du framework Foundation dont vous aurez besoin pour intégrer des éléments multimédia. Le composant flex video par exemple, facilite l’intégration des vidéos, et s’assure que le contenu peut s’adapter à différentes tailles d’écran et différentes résolutions. Il existe en outre d’autres composants pour la prévisualisation, ainsi que différents guides.

• Plug-ins : enfin, il est possible de sélectionner des extensions pour ZURB Foundation, qui vous permettront de travailler plus facilement avec le framework. Par exemple, avec la bibliothèque motion UI, vous pouvez télécharger une bibliothèque très utile, vous permettant de créer des transitions UI flexibles et des animations pour des jeux d’enfant (ce module ne fonctionne qu’avec la version Sass).

De plus, il est possible de définir certains paramètres de base du framework avant de le télécharger. Ceci comprend notamment le changement du nombre de colonnes, ou l’espacement et la largeur maximale du système de grille, les différents réglages de couleurs et la direction du texte (de gauche à droite ou de droite à gauche). Si vous souhaitez d’abord tester le framework sans avoir à vous informer sur les modules, vous pouvez également le télécharger en version complète (complete) ou en version allégée (essentials).

Si vous êtes satisfait des possibilités du CSS et que vous parvenez facilement à éditer les styles dans le document CSS téléchargé, il s’agit indiscutablement d’un bon choix. Le framework Foundation présente toutefois une caractéristique particulière : les bases du code CSS sont écrites avec la feuille de style du langage Sass (Syntactically Awesome Stylesheets), qui est un préprocesseur pour CSS. Sass permet de travailler avec des feuilles de style .scss, qui peuvent être compilées avec les documents .css connus pour être lus et interprétés par le navigateur.

Les utilisateurs qui ont recours à la version Sass du framework ZURB bénéficieront d’un certain nombre d’avantages, parmi lesquels :

• Une syntaxe simplifiée (Sass ou CSS), qui rend l‘écriture avec les feuilles de style plus facile

• La possibilité de définir des modèles (mixins) pour des motifs répétés et centralisés, et de les intégrer à tout moment

• Une combinaison facile de plusieurs feuilles de style pour minimiser les requêtes HTTP

• Plusieurs variables et fonctionnalités permettant de modifier les couleurs, les espaces, les polices, etc. de façon centralisée

• Grâce à Nesting, le code est facile à hiérarchiser, ce qui permet de travailler plus clairement et avec moins de lignes de code

Le compileur Sass a été dès l’origine écrit en Ruby. Si vous n’utilisez pas Ruby, il n’est nul besoin de l’installer pour Sass, dans la mesure où il existe une alternative disponible, LibSass, écrite en langage C. LibSass est compatible avec la plupart des navigateurs courants, et est facile à mettre en œuvre grâce à Node.js-Workflow, notamment pour traduire automatiquement les changements du code Sass vers le CSS.

Avec la mise à jour de la version 5 et la publication de Foundation 6.0, Zurb a encore considérablement réduit la taille des fichiers du framework. Avec un fichier CSS de 60 KB et un fichier JavaScript de 84 KB, ZURB Foundation jouit de sa réputation de compter parmi les plateformes de développement les plus légères. Grâce à la modularité du programme qui permet de choisir uniquement les modules dont on a besoin, il est même possible de réduire encore la taille du framework. En combinaison avec la grille flexible et les différents attributs ARIA (par exemple un puissant clavier de navigation) que ZURB a mis en œuvre, le programme fournit absolument tous les éléments nécessaires à la réalisation d’un projet Web qui s’adapte facilement à tout type de support. Les attributs ARIA sont bien documentés et disponibles partout où ils peuvent optimiser l’accessibilité de votre site Web. Si vous travaillez avec la version Sass du framework, vous disposez de plus d’options en ce qui concerne la conception, le design et la mise en page. L’utilisation de ces frameworks spécifiques est loin d’être facile pour les débutants et requiert un certain temps d’adaptation, ce qui vaut également pour la plateforme dans son ensemble. Par ailleurs, l’intégration d’éléments extérieurs est en général compliquée, qu’il s’agisse de modules de Foundation ou de projets réalisés avec un autre framework ou un autre système de gestion de contenu. ZURB Foundation présente quelques petits inconvénients par rapport à d’autres frameworks CSS tels que Bootstrap de Twitter: en effet, il présente un choix restreint de modèles, et n’est pas compatible avec les versions anciennes d’Internet Explorer.

ZURB Foundation accompagne les développeurs dans la réalisation des premiers prototypes jusqu’à celle de sites Web pleinement fonctionnels, et se distingue par son efficacité. Si vous n’avez pas besoin d’un ou plusieurs éléments en particulier, il est possible de simplement les supprimer, sans influencer pour autant le fonctionnement des autres éléments. Il en résulte un framework CSS doté d’un code très léger, qui met en pratique le principe mobile first choisi par ZURB. Outre le système de grille particulièrement flexible (qui peut également être personnalisé avec Sass), le framework Foundation est parfait pour développer des frontends responsifs, qui se distinguent par leur rapidité d’affichage et leur adaptabilité à différentes tailles d’écrans.

Il est aussi possible d’utiliser le framework ZURB pour réaliser des projets individuels plus complexes, mais ceci requiert un surcroit considérable d’effort, et implique de disposer d’une solide connaissance des snippets de code préfabriqués.