Share
Le Yeti est de retour! Foundation 6 est disponible aujourd'hui et nous sommes tous extrêmement excités par la nouvelle éthique de la conception, ses fonctionnalités et ses puissants outils que cette incarnation du célèbre framework de ZURB nous apporte! Il y a même un "extra" spécial dans cette version, alors plongez dans cet article pour avoir le détail complet..
Foundation 6 n'est pas simplement une itération visuelle, une restructuration du code ou un simple changement de numéro de version. L’équipe de ZURB s’est assise pour que celui-ci complètement repenser le cadre et voir ce qui devait arriver pour le rendre plus impressionnant. Foundation 6 concerne l'ensemble du processus; du prototype à la production.
Passer du prototype à la production est maintenant un jeu d'enfant!Les principaux objectifs de l'équipe de développement étaient les suivants:
"Pour Foundation 6, nous avons réduit de moitié la taille du fichier CSS complet, en optimisant de manière agressive notre utilisation de Sass et en simplifiant la structure et le style des composants."
- Geoff Kimball Concepteur de produits, ZURB
Comment ces objectifs ont-ils affecté notre cadre de travail préféré pour la création de sites Web impressionnants? Découvrons-le! Nous allons d'abord passer en revue certaines des principales fonctionnalités de Foundation 6, puis plonger plus en détail dans CSS / Sass et le JavaScript..
Le processus d’installation de la version Sass de Foundation 6 a été amélioré afin que vos projets puissent démarrer plus rapidement. Il y a beaucoup moins de dépendances et les erreurs sont gérées beaucoup plus intelligemment, vous aurez donc moins de difficulté à comprendre l'erreur en question..
Un autre avantage intéressant est que ZURB propose une pile optimisée avec son propre générateur de site statique, son serveur de recharge en direct et de nombreuses façons d'optimiser votre code avec UNCSS et UglifyJS. C'est la même pile que les gars de ZURB utilisent pour leurs propres projets (plus sur cela plus tard!).
«Fondation pour Sites 6 the Movie» à venir 2018. Peut-être.On s'inquiète beaucoup du code utilisé par les frameworks (tels que Bootstrap et Foundation) qui ne sont pas utilisés dans un projet. Même 90% du code CSS reste inutilisé, ce qui est vraiment inutile et pose un problème de performances. Dans cette optique, Foundation 6 bénéficie d’une réduction de 50% du code.!
Le Yeti a fonctionné et cela a porté ses fruits!ZURB a abordé ce problème de deux manières différentes avec Foundation 6, en appliquant moins de styles dès le début et en vous donnant les outils nécessaires pour supprimer les fichiers. Maintenant, vous pouvez plus facilement ajouter vos propres styles pour la version de production de votre projet. Les styles Fondation 6 Est-ce que l'offre peut facilement être mise à jour avec des variables via Sass.
En outre, de nombreuses classes de présentation ont été supprimées afin que le CSS généré reste propre. Cette version de Foundation ne comporte pas de classes stylistiques telles que les marges, les rembourrages et les arrondis et les rayons. À travers le familier _settings.scss fichier, il est maintenant encore plus facile d’importer sélectivement vos modules. En commentant de manière sélective les composants que vous n'utilisez pas, vous supprimerez facilement beaucoup de code CSS non utilisé.
Ainsi, avec un fichier plus léger dès le départ, moins de classes stylistiques et un contrôle accru sur ce qu'il faut inclure ou non, vous êtes maintenant prêt à transférer votre prototype dans un code prêt à la production et léger..
La documentation mise à jour fournie avec Foundation 6, ainsi que le formulaire de recherche mis à disposition par AJAX, vous permettent de rechercher rapidement quelque chose:
Le formulaire de recherche vous donne des suggestions lorsque vous tapez.Il suffit de taper le composant ou le sujet que vous recherchez et le formulaire de recherche vous fournit les sujets pertinents. C'est un petit plus qui fait de la plongée dans la documentation une expérience agréable.
Le Top Bar lui-même a également connu une grande mise à jour. Dans les versions précédentes, c'était excellent, mais c'était un peu inflexible. Plus maintenant! Foundation 6 présente Composants pour que la barre supérieure rende plus flexible et plus facile l'ajout et la suppression de certains éléments pour différents appareils, tels que:
Dans Foundation 6, ZURB a créé une grille de mixage plus flexible vous permettant de contrôler le nombre de colonnes sur une ligne. Vous pourriez faire quelque chose comme ça:
.conteneur // nous allons définir cette classe pour utiliser 16 colonnes @include grid-row (16) .sidebar // 5/16 = 31.25% @include grid-column (5); .main-content // 11/16 = 68,75% @include grille-colonne (11);
Ou quelque chose comme ça:
.sidebar // cela fera que .sidebar occupe 2 colonnes d'une grille de 5 colonnes @include grid-column (2 sur 5); .main-content // cela fera que .main-content occupe 3 colonnes d'une grille de 5 colonnes @include: grid-column (3 sur 5);
Créez votre propre nombre de colonnes pour un élément spécifique ou créez une ligne de cinq colonnes sans modifier le nombre de colonnes pour l'ensemble du projet. Cette nouvelle fonctionnalité vous donnera un contrôle plus granulaire sur la grille afin que vous puissiez adapter votre mise en page à votre contenu..
Foundation 6 a ramené le curseur Orbit, mais avec une approche différente cette fois-ci: il est conçu pour être un outil filaire. Cette version comprend seulement un peu de HTML et un peu de JavaScript. Le code à personnaliser se fera à l'intérieur du balisage de page et est beaucoup plus facile à réaliser.
Content de te revoir mon vieil ami!Lors de la recherche d'un curseur dans votre phase de production, l'équipe de ZURB recommande d'utiliser un curseur tel que le curseur Hibou par exemple. Comme mentionné, le curseur Orbit est purement conçu comme un outil filaire.
En travaillant avec leurs propres clients, ZURB a créé un modèle personnalisé pour la livraison de projets. Avec le guidon et construit sur Libsass, il s’agit de la pile gonflée que nous avons évoquée plus tôt. Il est là pour vous d’utiliser et d’optimiser votre propre flux de travail, il s’appelle Panini:
Un plan pré-fabriqué, prêt à être utilisé par votre prochain projet Ce système de compilation alimenté par Gulp fait beaucoup:
Le modèle peut également créer un code prêt pour la production, en ajoutant ces étapes supplémentaires:
Les modèles et les aides du guidon facilitent l'écriture de code dynamique pour les pages statiques!
Nouveau dans Foundation 6 est une grille alimentée par Flexbox, que vous pouvez utiliser à la place de la grille flottante traditionnelle. Il fonctionne de la même manière que la grille flottante standard, mais inclut un certain nombre de fonctionnalités utiles uniquement possibles avec Flexbox, telles que l'alignement horizontal et vertical, le dimensionnement automatique et le classement plus facile des sources. Nous connaissons la grille Flexbox de Foundation for Apps et il est formidable de voir que nous pouvons aussi l'utiliser dans Foundation for Sites!
Motion UI est une bibliothèque d’animation. Elle a été initialement créée et utilisée dans Foundation for Apps. Heureusement, vous pouvez également l'utiliser pour créer des transitions CSS personnalisées et des animations dans Foundation for Sites.!
Ajoutez tous les types de transitions et d'animations à vos projets Foundation!Cette version mise à jour inclut des options de transition plus robustes, un système de mise en file d'attente d'animation et des modèles CSS flexibles pouvant fonctionner avec toutes les bibliothèques d'animation Javascript..
Pour ajuster les différentes transitions et animations, vous devez manipuler les mixins Sass fournis avec cette version de Motion UI. Motion UI inclut également un grand nombre de classes CSS prédéfinies pour la mise en place rapide de vos prototypes..
La bibliothèque a été conçue pour être utilisée avec les frameworks Foundation, mais peut être adaptée pour fonctionner avec n'importe quelle bibliothèque d'animation de framework, telle que Angular ou React..
Comme mentionné précédemment, l'objectif principal de Foundation 6 était de faciliter son utilisation et de lui permettre d'écraser le cadre avec votre propre code prêt pour la production. Jetons un coup d'oeil à quelques unes des fonctionnalités intéressantes que Foundation 6 nous apporte concernant le CSS et Sass.
Créez plus facilement vos propres guides de style dans la nouvelle FondationDans Foundation 5, vous pouviez changer les points d'arrêt, mais il n'était pas évident de savoir où les trouver et comment s'y prendre. Plus maintenant. Foundation 6 vous offre un aperçu (une carte de points d'arrêt) dans lequel vous pouvez facilement ajuster, ajouter et supprimer des points d'arrêt du projet..
Pointe: essayez de rester avec les points d'arrêt par défaut autant que possible; la taille du fichier augmente avec des points d'arrêt supplémentaires.
Exemple de carte de points d'arrêt utilisant la nouvelle fonctionnalité Sass MapsAvec Foundation 5, vous deviez effectuer une interpolation de chaîne pour utiliser des requêtes multimédia dans vos fichiers Sass. Parce que cela n’était pas évident tout le temps et que les gens devaient souvent consulter la documentation pour copier et coller le code correct, l’équipe de ZURB a pensé que cela pourrait être fait plus facilement. Alors maintenant, au lieu de l'interpolation de chaîne, vous pouvez utiliser différents @includes d'inclure différents points d'arrêt. En utilisant moyen par exemple, est pour les points d'arrêt moyen et haut, moyen seulement pour bien, moyen seulement, et moyen vers le bas pour les moyens, petits, etc. Vous pouvez même inclure votre propre pixel, em de points de rupture rem et utiliser rétine, paysage et portrait.
"Nous voulions savoir comment les gens utilisaient Foundation, nous avons donc parcouru le monde et entendu des centaines d'appels pour voir comment la communauté utilisait le Framework et discutait de ce dont elle avait besoin. C'était incroyable!"
- Brandon Arnold, responsable de la fondation, ZURB
Le JavaScript a également subi une refonte en profondeur. Une façon de réduire la quantité de code dans les plugins JavaScript de Foundation 6 était de les séparer en utilitaires plus petits qui gèrent les événements sur des plugins plus importants. Et en rendant ces utilitaires accessibles au public, vous pouvez maintenant les utiliser pour créer vos propres plugins! Alors, quels plugins pouvons-nous trouver dans Foundation 6? Découvrons-le:
Branchez et jouez avec les nouveaux plugins d'aide de Foundations.Foundation 6 inclut une nouvelle API toggler permettant aux utilisateurs de rendre leurs sites plus rapidement et plus facilement dynamiques et d'afficher leurs états. Toggler facilite le basculement d'éléments et l'ajout de classes. C'est excellent pour la construction rapide, et ne nécessite aucune connaissance de JavaScript.
Basculer les classes avec un attribut de données. Par exemple:
Développer!
C'est une fonction publique pour déterminer les collisions avec le bord d'un conteneur. Cette détection de bord gardera les info-bulles, les listes déroulantes et plus dans la fenêtre ou le conteneur de votre choix..
Un générateur de nombres aléatoires. Vous pouvez l’utiliser pour ajouter des attributs «aria» A11Y nécessitant des identifiants, par exemple.
C'est une fonction pour ajouter un écouteur d'événement à la fenêtre s’il est appliqué, déclencher un événement non propulsif sur des éléments de plug-in individuels avec [data-yeti-box = 'idOfElement'] fermer. Si un autre élément du même type de plug-in s'ouvre, c'est-à-dire que si l'info-bulle B s'ouvre et que l'info-bulle A est ouverte, fermez l'info-bulle A avant d'ouvrir B.
Ici, on nous donne une fonction publique pour ajouter un onscroll écouteur d'événement à la fenêtre. Le balisage est le suivant: [data-scroll = 'idOfElement']
Une fonction pour ajouter un redimensionner écouteur d'événement à la fenêtre.
j'ai fabriqué ça!Presque tout le JavaScript a été construit avec des utilitaires distincts qui gèrent des fonctions communes comme les exemples ci-dessus. Cela permet aux plugins d'être plus petits, et avec eux, vous pouvez maintenant créer facilement votre propre!
En plus, ZURB a également lancé une toute nouvelle application Desktop Companion! Avec elle, vous pouvez lancer des projets en un seul clic de souris. Lancez-vous plus vite que jamais avec: Yeti Launch. Agréable!
Lancer des projets en un seul clic de souris!Foundation for Sites 6 a connu une refonte totale, reflétant la manière dont ZURB construit ses propres sites Web accessibles. Le partage de leurs connaissances et de leur expérience permet aux autres développeurs et concepteurs de créer des prototypes et de passer rapidement à la production..
Le yeti le plus rapide à ce jourEn résumé, qu'obtient-on avec Foundation 6?
Plus de 125 thèmes sur Envato Market sont compatibles avec Foundation 5 - serez-vous le premier à vendre quelque chose construit avec Foundation 6?!
Accentsconagua