ZURB Foun­da­tion : le framework CSS pour des frontends res­pon­sifs

Depuis 1998, l’agence de design amé­ri­caine Zurb ac­com­pagne les en­tre­prises dans la con­cep­tion de sites et de services Web de haute qualité. En 2008, les éléments de style dé­ve­lop­pés en interne pour les projets des clients ont été ras­sem­blé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 sim­pli­fier la création de pro­to­types et de réduire le temps de dé­ve­lop­pe­ment. Pour ce faire, les meilleurs snippets de code et les meilleurs modèles ont été extraits et intégrés dans le framework Foun­da­tion, qui a été publié en tant que projet open source en 2011, et est depuis dis­po­nible gra­tui­te­ment.

Foun­da­tion est un framework frontend responsif, composé d’éléments fonc­tion­nels HTML et CSS pour le design UI, divers snippets de code, des modèles, ainsi que des ex­ten­sions Ja­vaS­cript en option. Le framework, modulaire et conçu pour les projets in­ter­dis­ci­pli­naires, est distribué sous la licence MI, et peut être té­lé­chargé à partir de sa page of­fi­cielle 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 fra­me­works, grâce à de nouveaux modules variés conçus pour optimiser les per­for­mances, ainsi qu’une di­mi­nu­tion du poids des fichiers. Outre la version standard de Foun­da­tion, Zurb a également conçu des variantes pour le dé­ve­lop­pe­ment de news­let­ters (Foun­da­tion for emails) et d’ap­pli­ca­tions (Foun­da­tion for Apps) com­pa­tibles avec divers appareils.

Le framework Foun­da­tion se ca­rac­té­rise par un haut niveau de flexi­bi­lité, qui se traduit par une cons­truc­tion modulable. Il est possible, avant le té­lé­char­ge­ment, de choisir les modules dont vous avez ou non besoin: de cette façon, vous pouvez con­fi­gu­rer vous-même votre col­lec­tion de code, sans avoir à té­lé­char­ger des modules dont vous n’avez pas besoin. Si vous vous rendez compte a pos­te­riori que vous avez besoin d’un autre module, vous pouvez à tout moment le té­lé­char­ger pour l’ajouter au framework. De la même façon, vous pouvez également supprimer des com­po­sants dont vous n’avez plus l’utilité. Ceci vous permet de disposer en per­ma­nence des bons modules dont vous avez besoin pour réaliser votre projet Web. 

Pour Foun­da­tion 6.0 par exemple, il existe un choix de plus de 40 com­po­sants, regroupés en sept secteurs dif­fé­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 com­pa­tible avec divers appareils et diverses ré­so­lu­tions. Depuis la version 6.0, le module existe également en version flex grid, qui permet de po­si­tion­ner 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 ho­ri­zon­ta­le­ment ou ver­ti­ca­le­ment).

• General : les modules généraux (dont la grille fait également partie) com­pren­nent les classes Float et Vi­si­bi­lity, grâce aux­quelles on peut définir des règles pour le placement et la vi­si­bi­lité des éléments in­di­vi­duels. En outre, on trouve également dans cette section un composant pour les for­mu­laires et un module de ty­po­gra­phie, contenant des polices de bases et des options de formatage de texte.

• Controls : c’est ici que se trouvent les éléments in­te­rac­tifs les plus im­por­tants de votre projet Web. Il s’agit, par exemple, de boutons qui re­di­ri­gent le lecteur vers une autre page après un clic, ou qui ferment des éléments sé­lec­tion­nés. Il existe également des modules per­met­tant d’intégrer des dia­po­ra­mas, ainsi que des boutons marche/arrêt.

• Na­vi­ga­tion : il est bien sur possible qu’il manque des éléments de na­vi­ga­tion pour le design du frontend, c’est pourquoi il existe une large sélection de modules pour votre projet ZURB Foun­da­tion, grâce auxquels vous pouvez créer des menus (ac­cor­déons, menus défilants, listes dé­rou­lantes), ajouter des chemins de na­vi­ga­tion (bread­crumbs), ou numéroter les pages.

• Con­tai­ners : les con­te­neurs cons­ti­tuent 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 ac­cor­déons, les onglets, les listes dé­rou­lantes et les fenêtres de dialogue modales.

• Media : dans la rubrique media se trouvent les modules du framework Foun­da­tion dont vous aurez besoin pour intégrer des éléments mul­ti­mé­dia. Le composant flex video par exemple, facilite l’in­té­gra­tion des vidéos, et s’assure que le contenu peut s’adapter à dif­fé­rentes tailles d’écran et dif­fé­rentes ré­so­lu­tions. Il existe en outre d’autres com­po­sants pour la pré­vi­sua­li­sa­tion, ainsi que dif­fé­rents guides.

• Plug-ins : enfin, il est possible de sé­lec­tion­ner des ex­ten­sions pour ZURB Foun­da­tion, qui vous per­met­tront de tra­vail­ler plus fa­ci­le­ment avec le framework. Par exemple, avec la bi­blio­thèque motion UI, vous pouvez té­lé­char­ger une bi­blio­thèque très utile, vous per­met­tant de créer des tran­si­tions UI flexibles et des ani­ma­tions pour des jeux d’enfant (ce module ne fonc­tionne qu’avec la version Sass).

De plus, il est possible de définir certains pa­ra­mètres de base du framework avant de le té­lé­char­ger. Ceci comprend notamment le chan­ge­ment du nombre de colonnes, ou l’es­pa­ce­ment et la largeur maximale du système de grille, les dif­fé­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é­char­ger en version complète (complete) ou en version allégée (es­sen­tials).

Si vous êtes satisfait des pos­si­bi­li­tés du CSS et que vous parvenez fa­ci­le­ment à éditer les styles dans le document CSS té­lé­chargé, il s’agit in­dis­cu­ta­ble­ment d’un bon choix. Le framework Foun­da­tion présente toutefois une ca­rac­té­ris­tique par­ti­cu­lière : les bases du code CSS sont écrites avec la feuille de style du langage Sass (Syn­tac­ti­cally Awesome Sty­le­sheets), qui est un pré­pro­ces­seur pour CSS. Sass permet de tra­vail­ler avec des feuilles de style .scss, qui peuvent être compilées avec les documents .css connus pour être lus et in­ter­pré­tés par le na­vi­ga­teur.

Les uti­li­sa­teurs qui ont recours à la version Sass du framework ZURB bé­né­fi­cie­ront d’un certain nombre d’avantages, parmi lesquels :

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

• La pos­si­bi­lité de définir des modèles (mixins) pour des motifs répétés et cen­tra­li­sés, et de les intégrer à tout moment

• Une com­bi­nai­son facile de plusieurs feuilles de style pour minimiser les requêtes HTTP

• Plusieurs variables et fonc­tion­na­li­tés per­met­tant de modifier les couleurs, les espaces, les polices, etc. de façon cen­tra­li­sée

• Grâce à Nesting, le code est facile à hié­rar­chi­ser, ce qui permet de tra­vail­ler plus clai­re­ment 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 al­ter­na­tive dis­po­nible, LibSass, écrite en langage C. LibSass est com­pa­tible avec la plupart des na­vi­ga­teurs courants, et est facile à mettre en œuvre grâce à Node.js-Workflow, notamment pour traduire au­to­ma­ti­que­ment les chan­ge­ments du code Sass vers le CSS.

Avec la mise à jour de la version 5 et la pu­bli­ca­tion de Foun­da­tion 6.0, Zurb a encore con­si­dé­ra­ble­ment réduit la taille des fichiers du framework. Avec un fichier CSS de 60 KB et un fichier Ja­vaS­cript de 84 KB, ZURB Foun­da­tion jouit de sa ré­pu­ta­tion de compter parmi les pla­te­formes de dé­ve­lop­pe­ment les plus légères. Grâce à la mo­du­la­rité du programme qui permet de choisir uni­que­ment les modules dont on a besoin, il est même possible de réduire encore la taille du framework. En com­bi­nai­son avec la grille flexible et les dif­fé­rents attributs ARIA (par exemple un puissant clavier de na­vi­ga­tion) que ZURB a mis en œuvre, le programme fournit ab­so­lu­ment tous les éléments né­ces­saires à la réa­li­sa­tion d’un projet Web qui s’adapte fa­ci­le­ment à tout type de support. Les attributs ARIA sont bien do­cu­men­tés et dis­po­nibles partout où ils peuvent optimiser l’ac­ces­si­bi­lité de votre site Web. Si vous tra­vail­lez avec la version Sass du framework, vous disposez de plus d’options en ce qui concerne la con­cep­tion, le design et la mise en page. L’uti­li­sa­tion de ces fra­me­works spé­ci­fiques est loin d’être facile pour les débutants et requiert un certain temps d’adap­ta­tion, ce qui vaut également pour la pla­te­forme dans son ensemble. Par ailleurs, l’in­té­gra­tion d’éléments ex­té­rieurs est en général com­pli­quée, qu’il s’agisse de modules de Foun­da­tion ou de projets réalisés avec un autre framework ou un autre système de gestion de contenu. ZURB Foun­da­tion présente quelques petits in­con­vé­nients par rapport à d’autres fra­me­works CSS tels que Bootstrap de Twitter: en effet, il présente un choix restreint de modèles, et n’est pas com­pa­tible avec les versions anciennes d’Internet Explorer.

ZURB Foun­da­tion ac­com­pagne les dé­ve­lop­peurs dans la réa­li­sa­tion des premiers pro­to­types jusqu’à celle de sites Web plei­ne­ment fonc­tion­nels, et se distingue par son ef­fi­ca­cité. Si vous n’avez pas besoin d’un ou plusieurs éléments en par­ti­cu­lier, il est possible de sim­ple­ment les supprimer, sans in­fluen­cer pour autant le fonc­tion­ne­ment 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 par­ti­cu­liè­re­ment flexible (qui peut également être per­son­na­lisé avec Sass), le framework Foun­da­tion est parfait pour dé­ve­lop­per des frontends res­pon­sifs, qui se dis­tin­guent par leur rapidité d’affichage et leur adap­ta­bi­lité à dif­fé­rentes tailles d’écrans.

Il est aussi possible d’utiliser le framework ZURB pour réaliser des projets in­di­vi­duels plus complexes, mais ceci requiert un surcroit con­si­dé­rable d’effort, et implique de disposer d’une solide con­nais­sance des snippets de code pré­fa­bri­qués.