Foundation 6 - 10 nouvelles fonctionnalités étonnantes

Les développeurs du framework frontal de la Fondation ne se sont pas contentés de lauriers alors que l'équipe Bootstrap travaillait sur leur nouvelle version majeure impressionnante. L'année dernière, ils ont participé à un tour du monde fantastique pour partager leurs connaissances avec leurs utilisateurs et leur demander comment ils utilisaient Foundation dans leur travail réel..

De retour à leur bureau, ils ont résumé les besoins et les souhaits de leurs utilisateurs et se sont lancés dans la planification de la nouvelle version majeure du cadre: Foundation 6.

Il est encore en développement, mais les plans sont très prometteurs. Les fonctionnalités à venir se concentrent sur 3 domaines principaux: performances, personnalisation et accessibilité. Jetons un coup d'oeil à 10 de ces fonctionnalités maintenant.

1. Flux de travail simplifié

Sur la base des expériences de leurs utilisateurs, l’équipe de la Fondation a développé un nouveau slogan, à savoir: “Prototype à la production”, Foundation 6. Cela signifie un nouveau flux de travail rationalisé qui permettra aux concepteurs et aux développeurs de aller directement du prototype à la production.

L’objectif de la nouvelle fondation 6 est de fournir un cadre flexible et facilement personnalisable permettant de écrire du code propre et sémantique dès le début. La version actuelle, Foundation 5 permet également le prototypage rapide, mais nous pouvons attendre plus d'optimisation du flux de travail dans la prochaine version.

2. Processus d'installation simplifié pour la version Sass

L’un des aspects les plus impressionnants du framework Foundation est qu’il est construit avec le langage de feuille de style Sass. Il est donc possible de: personnaliser rapidement les règles de style par défaut en fonction de nos besoins réels.

Le processus d’installation de Sass a été un peu intimidant pour beaucoup d’utilisateurs, aussi la nouvelle version majeure obtenir un processus d'installation simplifié pour la version Sass. Cela signifie que la configuration Sass sera nécessite beaucoup moins de dépendances qu'avant. Bien sûr, si vous préférez la version CSS vanille, vous pouvez toujours opter pour cela..

3. Une nouvelle pile de réglages bien garnie pour les maximalistes

Outre la version Sass habituelle, Foundation 6 sera accompagné d’un disque Sass version qui fournira aux développeurs de puissantes options de personnalisation.

ZURB, le créateur de Foundation, ouvrira au public son propre programme de développement, y compris son propre générateur de site statique, serveur de recharge en direct et des tas de techniques d'optimisation interne y compris l'intégration de UnCSS pour la suppression des styles inutilisés et la compression UglifyJS pour JavaScript.

Nous aurons donc la possibilité de travailler dans le même environnement de développement que celui utilisé en interne par ZURB..

4. Temps de chargement de page réduit

L’équipe de la Fondation a dû faire face à des critiques constructives selon lesquelles dans la plupart des projets de la Fondation, environ 90% du code CSS deviendrait inutilisé. Cela n’est pas vrai que pour Foundation, mais également pour d’autres infrastructures CSS majeures telles que Bootstrap et TopCoat. Dans sa réponse, Zurb a décidé de réduire considérablement la taille du fichier CSS généré en implémentant une réduction de code d'environ 40 à 50%..

Il est intéressant de noter qu'ils essaient de se distinguer de Bootstrap en déclarant "Foundation n'est pas un framework qui aura des classes stylistiques avec marge et remplissage ou arrondi et rayon". (Pour référence, voir les nouvelles classes d’utilitaires de Bootstrap 4 dans notre précédent post).

5. Styles de base faisant office de structures filaires

L’autre partie de l’amélioration de la performance consiste à créer un style de base qui agit comme un fil de fer au lieu d'un dessin final. Cela conduit principalement à un thème plus léger, mais a également un autre gros avantage. Au fur et à mesure que plusieurs règles de style seront déplacées dans des composants individuels, les développeurs auront la possibilité de style plus facilement leur design.

Espérons que cela signifie que les sites basés sur Foundation vont avoir un aspect similaire et normalisé, et les concepteurs auront plus d'espace pour experiment avec une belle et unique solutiondes ions qui réfuteront les inquiétudes récentes au sujet d’un réseau à l’air ennuyeux.

6. Importation sélective facilitée

Foundation 5 permet aux développeurs de choisir uniquement les composants qu'ils souhaitent utiliser. Foundation 6 va pousser cette entreprise au prochain niveau en déplacement de la fonction d'importation sélective dans le fichier Sass _settings.scss.

De cette façon, _settings.scss sera un Fichier de configuration vraiment universel, car nous ne pourrons pas seulement personnaliser des fonctionnalités telles que la largeur des lignes ou les polices par défaut avec son aide, mais aussi facilement. le retrait des composants dont nous n'avons pas besoin. Si nous le faisons, nous pouvons réaliser une nouvelle amélioration de la performance.

7. Sass plus maigre et plus propre

Dans le processus de refonte, l’équipe de la Fondation a repensé chaque aspect du cadre afin de changé la façon dont ils ont utilisé le langage de feuille de style Sass. Ils ont constaté que dans certains cas, ils ont trop utilisé Sass qui a conduit à la complication inutile de la sortie CSS. Avec pour objectif une base de code plus claire et plus propre, ils ont également rationalisé leur structure Sass.

Dans la fondation 6, nous pouvons s'attendre à une diminution de la nidification et de la spécificité, à la rationalisation des requêtes multimédia (ils ont fusionné du code répétitif), et mixins de composants réduits. Ce dernier signifie qu'il y aura moins de mixins de composants et que les autres auront moins de paramètres, ce qui conduira à un code plus simple et plus logique.

Si vous aimez les mixins, ne vous inquiétez pas, chaque composant en aura toujours, c'est juste qu'ils seront redessinés pour être plus efficaces et utiles qu'ils ne le sont actuellement..

8. Mixins de grille améliorés

Tout en réduisant les mélanges de composants, Foundation 6 viendra avec mixins de grille améliorés cela nous permettra de créer une grille plus personnalisée.

Zurb promet que nous pourrons construire facilement un système de grille compliqué comme nous voulons, y compris rangées personnalisées plus sophistiquées et grilles imbriquées, et la possibilité de convertir les classes par défaut en balisage sémantique. Les mixins de réseau améliorés rendront le courant création de grille encore plus intuitive, flexible et plus rapide.

9. Intégration transparente de plugins JavaScript personnalisés

Foundation 5 contient actuellement de nombreux composants JavaScript tels que des boîtes de dialogue modales, des info-bulles, une barre de navigation adhésive, des lightboxes et bien d’autres dont un site Web moderne a besoin, mais la prochaine version majeure nous permettra de écrire nos plugins JavaScript personnalisés en tirant parti du noyau de la Fondation. C'est un énorme pas en avant dans les deux convivialité et performance.

À l'avenir, nous pourrons accéder aux méthodes d'initialisation intégrées, bascule les déclencheurs et points d'arrêt, et utiliser toutes les autres fonctionnalités du code JavaScript global de Foundation.

10. Accessibilité totale

La caractéristique la plus étonnante de la nouvelle Fondation 6 est probablement son accessibilité totale. Chaque composant et extrait de code viendra avec les attributs WAI-ARIA et les rôles de repère appropriés. De plus, les développeurs seront même muni d'un guide d'utilisation sur comment utiliser les standards web a11y.

Donc, si nous voulons fournir à notre client un site Web entièrement accessible, nous n'avons pas besoin de faire autre chose que de construire notre conception avec Foundation 6. Veuillez noter que nous aurons toujours besoin de ajouter les règles ARIA appropriées à nos propres pages HTML, bien que le guide de l'utilisateur à venir de Zurb facilitera sûrement le processus d'apprentissage.