Aujourd'hui sur le BlogDuWebdesign, focus sur la nouvelle version de Zurb Fondation, qui bien que n'étant pas une version "majeur" vient chambouler le game avec un changement de taille, le plus gros envisageable pour un framework responsive : une nouvelle grille !

Sans plus attendre, passons aux nouveautés de cette nouvelle version, la 6.4.

Support des modules ES2016

Commençons avec un premier point qui n'intéressera pas la plupart d'entre vous et qui pourtant est fondamental : le passage a une architecture modulaire qui permet enfin de require() et/ou import.

Si vous etes intégrateur et que cela ne vous dit strictement rien, dites-vous que c'est l'équivalent de l'utilisation de @import et de cette structure en modules à la carte que vous avez en Sass depuis Fondation 3 (et donc depuis 5 ans). C'est un énorme pas en avant pour ce qui est de l'organisation des fichiers Javascript.

Si vous êtes un développeur Javascript et que vous ne savez pas de quoi je parle, je vous encourage vraiment très fortement à jeter un oeil à Gulp, Webpack et aux modules ES6. Ces compétences sont à mon avis nécessaire en 2017, et vous y gagnerez énormément dans votre travail journalier.

Nouvelle grille : XY Grid

Enchainons avec le plat de résistance, LA raison qui fait qu'une mise à jour non majeur de Fondation mérite son article : une nouvelle grille !

Je pars du fait que tout le monde sait ce qu'est une grille responsive pour un framework CSS. Si c'est un concept obscur pour vous, je vous encourage vraiment à vous documenter sur ce point !

Évidemment, qui dit nouvelles grille dit nouvelle syntaxe et XY grille ne fait pas exception, avec un changement très important des classes utilisées, mais aussi des concepts utilisés.

La nouvelle grille étant construite sur Flexbox, nous "perdons" les colonnes au profit des cellules, ce qui nous permet entre autres de nouvelles possibilités comme l'utilisation de cellules pouvant s'adapter en prenant automatiquement toute la taille restante disponible, des centrages horizontaux ET verticaux bien plus simples, des grilles secondaires ou chaque cellule a une taille fixe, etc.

Très franchement, les changements sont massifs et toute personne n'ayant jamais mis les pieds dans le monde de Flexbox auront besoin de quelques heures au minimum pour s'y adapter, mais une fois ce temps passe les gains sont vraiment appréciables. Je vous encourage donc vraiment à profiter de la période un peu molle de l'été vous pencher de plus près sur cette nouvelle grille.

Nouvelles options pour le Prototyping

Fondation 6 avait poursuivi le travail amorce sur le prototyping par Fondation 5 et sa collection de templates, et Fondation 6.4 vient pousser dans ce sens avec une distinction bien plus claire entre les portions de CSS qui doivent se retrouver dans votre projet final et les portions faites pour le prototypage uniquement.

Je ne m'aventurerai pas plus en avant sur ce point, car bien que le prototyping CSS soit particulièrement alechant, nous n'avons pas encore saute le pas, et je ne l'ai donc pas encore touché.

Mise au point sur le support navigateur.

Foundation abandonne totalement le support des (très) vieux navigateurs, seuls sont supporté Chrome, Firefox, Safari 6+, IE10+, iOS 7+, et Android 4.4+, et ce a cause de Flexbox. Ce qui en france fait tout de même 96.85% d'après CanIUse.

Évidemment, nous abandonnons des gens qui ne peuvent pas migrer derrière nous, l'intérêt d'un Framework est d'assurer la compatibilité avec tous, et quid des gens n'ayant pas de Javascript, etc.

Soyons franc 5 minutes : à quand remonté vos derniers tests navigateurs sur IE8/9 ou sur safari 4 ?
Je pense que nous avons tous une anecdote sur un problème a cause d'un navigateur Legacy qui date de moins de 6 mois (moins de deux semaines pour ma part) mais ces problèmes sont vraiment devenu marginaux, et cela est principalement dû au fait que les webdesigners et webdeveloppeurs ont décident d'abandonnés les animaux les plus faibles du troupeau derrière eux.

En conclusion, a moins que vous ne développiez pour une population très spécifique avec un usage connu de navigateurs legacy, soufflez un grand coup et dites-vous qu'abandonner 5% des gens sur le côté de la route n'est pas un drame, et que cela les poussera peut-être à mettre à jour leur navigateur (et donc gagner en sécurité).

Notez cet article