Foundation de Zurb est un framework qui permet de simplifier le responsive design de votre site internet. Ce système permet de soulager la charge du développement de votre site car il est composé de nombreuses fonctionnalités prêtes à être utilisées (menu off canvas, boutons, formulaire, fil d’Ariane, système de pagination, slider et bien plus encore…).
Grâce à son système de grille conçu en mobile first, dès que vous commencerez à vous en servir, votre site sera instantanément responsive. Sa simplicité d’utilisation et son architecture entièrement personnalisable et modifiable vous permettront de réaliser le site à votre image et complètement adapté à tout type de support. Cet outil vous est proposé gratuitement mais son utilisation requiert un apprentissage préalable.
Une structure pour bien commencer
Il existe une base qui permet d’utiliser Foundation sur votre site WordPress, appelée « FoundationPress ». Il s’agit d’un « starter-theme » c’est-à-dire un thème conçu pour démarrer un projet. On entend par là que ce n’est pas un produit fini mais bien un outil pour la construction d’un thème personnalisé pour WordPress.
Grâce à ses fonctionnalités natives et une documentation riche, ce framework est un outil indispensable pour votre projet. L’utilisation de Foundation sur WordPress ne change pas vos habitudes car sa structure facile à utiliser vous donne beaucoup de flexibilité sur la construction de votre site. Cette association permet de concevoir un site responsive ayant des fonctionnalités natives.
Le système de grille
Il faut savoir que Foundation est construit sur un système de grille à 12 colonnes et que chaque partie de votre site forme une rangée. Une série de colonnes est imbriquée dans des rangées et le total de colonnes doit être égal à 12. Par exemple dans une structure HTML, nous avons 3 éléments présents dans une rangée, comme ceci :
<div class="row"> <div class="small-2 large-4 columns">...</div> <div class="small-4 large-4 columns">...</div> <div class="small-6 large-4 columns">...</div> </div>
Ce qui nous donne comme rendu HTML :
Le système de classes
Quand vous travaillez avec Foundation, vous devez garder en mémoire 5 classes bien précises :
- .row : permet de définir une rangée ;
- .columns : pour chaque rangée vous devez ajouter une ou plusieurs colonnes ;
- .small-# : Fondation a plusieurs classes pour spécifier la largeur des colonnes, et chacune est suivie par un certain nombre qui spécifie le nombre de colonnes qu’elle doit occuper dans l’espace (un élément avec la classe .small-4 va occuper quatre colonnes) ;
- .medium-# : équivalent de .small pour les largeurs d’écran de type tablette (si un élément est composée d’une classe .small et d’une classe .medium, la classe .small sera utilisée pour les téléphones et la .medium pour les tablettes et ordinateurs) ;
- .large-# : cette classe est utilisée pour les grands écrans (ordinateur).
Il existe d’autres classes qui vous permettront d’interagir avec votre structure HTML.
Pour en savoir plus sur Foundation de Zurb : foundation.zurb.com