Découvrez les nouveautés de la version 5 du framework Zurb-Foundation.
Zurb Foundation passe en version 5 ! Voyons quelles sont les nouveautés que Zurb nous a sorties de leur chapeau pendant les neuf mois séparant la version 4 (la première version mobile-first du framework) de cette nouvelle version.
Pour ceux qui ne connaîtraient pas Foundation, voila un petit rattrapage.
Foundation est un framework responsive front-end né en 2011, et basé sur le préprocesseur Sass. Foundation possède une syntaxe simple, et une grille intuitive. Il a en outre quelques modules Javascript fournis, permettant de bootstraper rapidement un site autour d’une idée.
Il repond aux memes besoins que Twitter Bootstrap (sorti la meme annee). Mon préféré des deux reste Foundation, pour le Sass (supérieur au less a mon gout) et pour sa syntaxe plus claire.
Voir le site de Foundation.
Quelles sont les nouveautés
Foundation 4 amenait comme grosses nouveautés : un javascript complettement retravaillé et l’approche mobile-first. Foundation 5 perfectionne clairement ces deux points, qui arrivent à maturité dans cette nouvelle version, avec de nouveaux outils, et un Javascript unifie sous la forme d’un unique plugin jQuery.
Les breakpoints sont maintenant plus simples à configurer, et nous pouvons noter l’apparition d’une nouvelle grille intermédiaire entre le PC et le mobile, pour les tablettes de petit format (7 pouces, par exemple).
Les classes pour la gestion des visibilités en fonction des tailles d’écrans sont maintenant plus souples à travailler.
Parmi les grandes nouveautés, Il faut compter le « content interchanging », qui permet de ne télécharger que le contenu affiche pour son format, et donc limiter la taille des images fournit à un téléphone, par exemple. Pratique en attendant la validation de la spec pour les images responsives par le W3C.
Une autre feature impressionnante de puissance et de simplicité est la mise en place des grid-blocks : Il suffit d’indiquer à un ul (par exemple) qu’il doit afficher 4 éléments par ligne sur un grand écran, et seulement 2 sur petits écrans, et les li se mettront en place tout seul, avec la taille adéquate, sans besoin de CSS supplémentaire.
Un outil en CLI pour simplifier la mise en place
Foundation se dote enfin d’un outil en ligne de commande, pour simplifier la création de nouveaux projets. Cet outil va certainement voir s’étoffer ses possibilités avec le temps, pour permettre l’installation simplifiée de plugins ou de nouvelles templates.
Conclusion
En conclusion, cette version 5 semble être une très bonne mouture, tant au niveau des nouveautés que des améliorations de fonctionnalités en place (comme l’accélération du JS par exemple).
La version 4 n’a pas trouve sa place dans notre Workflow, les gains étant moins intéressants que le temps de migration, mais cette version 5 n’ayant clairement pas le même souci, je ne doute pas que nous l’adoption rapidement.