• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

3Commentaires

  • Avatar_thumb
    Boostyweb.fr

    le 01/03/2013 | #1

    Franchement, je suis allé y faire un tour et à titre personnel que trouve que ça ne vaut pas le Bootstrap Twitter. Ce n'est qu'un avis perso. Le Js utilisé pour les fonctionnalités type DropDown est beaucoup lus lent à se charger que le simple jQuery du Bootsrap... La gestion des ecrans "large" est plutot moins bonne avec une grille qui semble se stopper à 980px en fixe... Bref... j'suis pas fan d'emblée. L'approche Mobile First (si c'est le cas) me semble être la seule innovation de framework. Et comme l'approche mobile first n'est qu'une méthode parmi d'autres (qui commence a être décriée par certains d'ailleurs), ce framework, en tant qu'utilisateur, ne m'apparait pas comme une revolution. Fred, @boostyweb.fr

  • Avatar_thumb
    xoco

    le 18/03/2013 | #2

    Ba Fundation apporte quand même des suppert fonctionnalités que bootstrap n'apporte pas. Par exemple, la barre de navigation (fixe en haut de site) est hyper bien pour les version mobile. Défilement horizontale sur plusieurs niveaux ... Je pense vraiment qu'ils sont sur la bonne voie : mobil first, allégement des bibliothèques. Concernant la largeur, c'est paramétrable. Tu peux définir la largeur max et la taille des goutières etc. Je hate d'essayer ce fundation 4. Par rapport à Bootstrap, je le trouve plus simple et on perd moins de temps personnalisé... C'est mon avis :-) Bonne journée.

  • Avatar_thumb
    Alan

    le 05/04/2013 | #3

    Hello, Je l'ai essayé hier et c'est un régal pour développeurs ! J'ai plutôt utilisé bootstrap auparavant, mais j'ai mieux aimé la simplicité de Foundation. Comme XOCO, j'ai trouvé que la personnalisation de l'ensemble était plus rapide. Au niveau du JS, le système joyride à l'air d'une pure merveille ! Le système de modal qui se suivent est aussi intéressant ! J'ai bien l'intention de l'intégrer dans mes futures réalisations. Après, c'est difficile de comparer avec Bootstrap puisqu'en terme de résultat final, c'est surtout un look qui va être un peu différent. Globalement, ça reste un système de Grid. A bientôt !

Ecrire un commentaire

captcha

Ouvrir