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