Tutoriel Foundation : Foundation 6

Foundation vient de mettre en ligne la version 6 de son Framework front-end. Fort de l'expérience utilisateur acquise avec les versions précédentes du Framework, l'équipe de ZURB a encore retravaillé le Framework pour le rendre plus facile à utiliser.

Un prototypage plus rapide

Le premier objectif de cette nouvelle version est de rendre la phase de prototypage plus rapide. Le but est de créer un projet utilisant le Framework rapidement sans avoir à perdre du temps dans sa mise en place. La première nouveauté est la mise en place d'un invité de commande qui va vous permettre de créer rapidement un projet basé sur le Framework Foundation.

npm install --global foundation-cli
foundation new

Au niveau du design, le style de Foundation n'a pas beaucoup changé. Le but reste toujours de créer un design le plus neutre possible afin de pouvoir utiliser Foundation pour présenter la structure d'un site Web à la manière d'un Wireframe. On trouvera dans le Framework de nombreuses classes permettant de représenter les éléments par défaut dont on pourrait avoir besoin pour créer cette première maquette. Dans cette même optique, de nombreux plug-ins JavaScript ont été créés et peuvent être configurés afin de limiter au maximum la nécessité d'écrire du code supplémentaire pendant la phase de prototypage.

Un framework pour la production

Le problème lorsque l'on utilise un Framework front-end c'est que l'on se retrouve souvent avec des classes qui sont relativement peu sémantiques. Foundation 6 propose de remédier à ce problème en offrant la possibilité d'utiliser les mixins du Framework dans notre propre code SASS. Ainsi il est possible d'utiliser des éléments du Framework sans forcément utiliser les classes qui correspondent ce qui permet de passer rapidement de la phase de prototype à la phase de production.

De la même façon, l'ensemble du JavaScript et du CSS a été conçu de manière modulable afin de limiter le poids de notre application. On pourra ainsi choisir les fichiers à importer pour n'inclure que le strict nécessaire au fonctionnement de notre application. Enfin, comme pour les versions précédentes, il est possible de personnaliser entièrement l'apparence des éléments en utilisant des variables de configuration.