Présentation des nouveautés de Foundation Framework 6.4 et de la nouvelle XY Grid

Le 18/07/2017

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

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 êtes 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 2023, et vous y gagnerez énormément dans votre travail journalier.

Nouvelle grille : XY Grid

Enchaînons avec le plat de résistance, LA raison qui fait qu'une mise à jour non majeure 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 nouvelle 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 où 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 passé, les gains sont vraiment appréciables. Je vous encourage donc vraiment à profiter de la période un peu molle de l'été pour vous pencher de plus près sur cette nouvelle grille.

Nouvelles options pour le Prototyping

Mise au point sur le support navigateur.

É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 remontent vos derniers tests navigateurs sur IE8/9 ou sur Safari 4 ?
Je pense que nous avons tous une anecdote sur un problème à 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 devenus marginaux, et cela est principalement dû au fait que les webdesigners et webdéveloppeurs ont décidé d'abandonner les animaux les plus faibles du troupeau derrière eux.

En conclusion, à 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é).