Foundation 4 est sortie !

Malgré Ruby sortant sa version 2 et Rails sa version 4, Zurb a dû penser que nous n’avions pas assez de travail comme ça pour se maintenir à jour, et sort Foundation 4. Voilà un aperçu des changements.

Grande nouvelle, Foundation, autoproclamé framework responsive le plus avancé au monde (et je suis un peu du même avis) passe en version 4 ! Faisons un point sur les particularités de ce framework, ainsi que des nouveautés annoncées.

Foundation, qu’est ce que c’est ?

Foundation est un framework Front end, basé sur Sass. Assez similaire à Bootstrap dans la forme, il s’en éloigne plus dans le fond en étant plus simple à personnaliser, plus léger (et donc moins complet d’une certaine manière), mais surtout bien plus porté sur la sémantique que Bootstrap. C’est le 14ème dépôt le plus suivi de Github, il a donc une communauté assez étendue.

Il possède les outils standard de tout bon framework : modals, slide, grille, menus, boutons, etc. Mention spéciale pour sa grille de très bonne qualité faite pour pouvoir se passer des habituelles row, three.columns et autres, en surchargeant d’autres classes plus explicites sémantiquement.

Voir le site de Foundation.

Foundation 4 : Les nouveautés

Mobile First

Enfin, Foundation passe en Mobile First ! Plutôt que de commencer par construire pour les grands écrans puis se demander où mettre/cacher les éléments et informations sur les petits écrans, Foundation 4 est fait pour l’inverse : commencer sur petit écran, puis complexifier le layout alors qu’on gagne en place.

Pour ça, la grille a été complètement retravaillée pour rendre ce processus logique et éviter de surcharger les pauvres mobiles d’éléments non affichés. De plus, Foundation étant livré avec Modernizr, il encourage à utiliser l’amélioration progressive plutôt que la dégradation gracieuse.

Pour les curieux : Le livre Mobile First par Luke Wroblewski

Un Javascript complètement retravaillé

Un des points faibles de Foundation (et de Bootstrap) était pour moi le Javascript. Ces Frameworks mettaient l’accent sur le CSS au point de le négliger un petit peu.

Foundation 4 arrive avec un Javascript entièrement retravaillé, plus rapide et plus propre. De plus, il y a enfin une entrée Javascript dans la doc de foundation, et cela sauvera beaucoup de vies dont la mienne, je pense.

Tout sémantique

Foundation 3 avait une grille sémantique. Il était possible en Sass de dire à un élément qu’il prenait 3 colonnes en lui appliquant @include column(3), par exemple.

Foundation 4 continue sur cette lancée et applique ce procédé à toutes les classes qu’il fournit. Plus de .primary.button.large, place à des classes sémantiques partout !

Des Templates HTML

Les pages ressemblent souvent à une grande catégorie de modèle. Fort de ce constat, Zurb a préparé des pages « toutes faites » de base. Il suffit de les copier coller dans son body, et la structure est faite, il n’y a plus qu’à la personnaliser.

> Voir les template sur Foundation 

Stencils

Besoin de faire des Wireframes ? Plutôt que de dessiner les objets, Foundation vous propose un pack d’éléments à importer directement dans Adobe illustrator (ou tout autre programme de dessin vectoriel)

Une Font d’icônes

Foundation n’avait pas sa font d’icones à lui, c’est maintenant chose faite. 

Conclusion

Je n’ai pas grand-chose à dire en conclusion, malheureusement, si ce n’est que j’ai hate d’avoir le temps de mettre les mains dans cette nouvelle version du Framework, voir s’il tient ses promesses, et commencer à scripter quelques petites choses pour la génération des templates proposés par Zurb.

Si les promesses sont tenues, et si le démarrage de cette version est un peu moins chaotique que celle de la version 3, Foundation sera maintenant aussi complet que Bootstrap pour faire des démarrages canons de site, tout en restant plus logique et sémantique.

Voir le site de Foundation.