Foundation 6 est presque prêt à sortir de la version bêta, et il est meilleur que ses prédécesseurs à presque tous les égards: il est plus simple, plus simple et plus sophistiqué. Zurb se sont surpassés.
Comme vous le constaterez par vous-même lorsque vous l'aurez enfin installé - assez simple sous OSX ou Linux, mais sous Windows, Node peut être difficile - Foundation 6 ne peut être installé que par le biais du gestionnaire de paquets de nos jours. J'ai le sentiment de vieillir, de rêver du bon vieux temps où les frameworks CSS étaient disponibles en fichiers .zip, et non à partir d'une commande de terminal.
Pourtant, je ne mentais pas quand j'ai dit que Foundation 6 était génial. Eh bien, je devrais dire "Foundation for Sites", car Foundation n'est plus un cadre unique. Outre la Fondation pour les applications, Zurb a également été occupé à créer quelques outils pour accélérer le développement.
Cette version a été tout au sujet des performances ... vous pouvez créer des sites plus rapidement, ces sites téléchargeront plus rapidement, et le JavaScript s'exécutera plus rapidement.
Tout d'abord, il y a la Fondation CLI , qui peut installer n'importe quelle version de Foundation pour vous, accompagnée de projets de démarrage. Le fichier CSS pré-compilé de Foundation for Sites sera disponible pour téléchargement séparé lors de la publication finale. Pour l'instant, cependant, la CLI est le moyen de l'obtenir et de rester à jour avec tous les changements avant la version finale.
Puis il y a Panini , un compilateur de pages statiques avec des modèles de Handlebars et plusieurs autres fonctionnalités pour vous aider à créer rapidement des prototypes et / ou des sites statiques. Il compile le Sass, place tout le JavaScript dans un fichier, il peut compresser tout votre code, et plus encore.
Maintenant, n'ayez pas l’idée que cette version de Foundation est moins riche en fonctionnalités - elle contient toujours tout ce dont vous avez besoin - mais il convient de noter que certains éléments mieux adaptés aux applications que les sites ont été supprimés. Ces éléments font maintenant partie de Fondation pour les applications .
Le reste du travail dans cette version consistait à se débarrasser du code redondant et à rationaliser tout ce qui restait.
Par exemple, au lieu de créer trois composants de menu différents pour trois conceptions de menu différentes, il existe un seul composant de menu, avec plusieurs variantes. Pour la personne qui écrit le HTML, il y a peu de différence: ajoutez une classe et vous avez un menu; changer quelques classes et vous avez un menu qui a l'air complètement différent.
En fait, pour toutes les différences, beaucoup de classes et de balises vont sembler très familières, voire identiques. Tout est construit sur Sass afin que vous puissiez le personnaliser comme toujours.
Cette version a été tout au sujet de la performance. Une fois que vous aurez appris comment créer des sites plus rapidement, ces sites seront téléchargés plus rapidement et le code JavaScript fonctionnera plus rapidement. La base est maintenant environ deux fois moins lourde que la taille du fichier. La moitié
Les versions plus anciennes supportaient les langages RTL (de droite à gauche) comme l'arabe dans une certaine mesure; mais ils avaient besoin de quelques ajustements. Foundation 6 a un support intégré.
La grille Flex est exactement ce que vous pensez: c'est le composant Grid refait avec Flexbox. D'une part, cela lui donne un certain nombre de fonctionnalités et d'options qu'un réseau ordinaire à base de flottant ne peut pas gérer. D'un autre côté, ce n'est probablement pas aussi bien supporté, surtout par IE. C'est un compromis.
Quelques améliorations intéressantes ont été apportées à la typographie de type site Web. Plus précisément, il existe des classes d'assistance conçues pour faciliter la gestion des mises en page typographiques:
Comme mentionné ci-dessus, tous les composants de navigation précédents ont été fusionnés en un seul composant flexible. Cela signifie que tous les types de navigation joueront bien l'un avec l'autre. Cela signifie également que vous pouvez choisir différents types de navigation pour différentes tailles d'écran.
Vous souhaitez une navigation détaillée sur un smartphone et une barre horizontale sur un bureau? Facilement fait avec les classes spécifiques à la taille de l'écran. Voulez-vous votre "Top Bar" de retour? Ajoutez simplement un div wrapper autour des composants de menu par défaut.
Mais bien qu'il soit plus simple à utiliser, il est toujours chargé de fonctionnalités. Assurez-vous de consulter la documentation sur les menus et la navigation .
Vous connaissez ces petits cercles ou carrés - généralement placés sur ou près des icônes de toutes sortes - avec des nombres minuscules? Comme quand vous avez des notifications sur Facebook? Ceux-ci s'appellent des badges.
Vous apprenez quelque chose de nouveau chaque jour. Aussi, la Fondation les a maintenant.
Besoin de faire en sorte que quelque chose reste sur l'écran pendant que l'utilisateur fait défiler? Voulez-vous le faire cesser à un certain moment? Sticky est votre plugin! C'est aussi la chose à utiliser si vous voulez que le menu Magellan fonctionne comme dans Foundation 5.
Si les listes déroulantes, les accordéons, les analyses détaillées, les infobulles et les modaux ne vous suffisent pas, voici un moyen générique de faire apparaître ou disparaître des éléments. C'est un simple événement de bascule basé sur JavaScript qui peut être appliqué à pratiquement n'importe quoi.
J'imagine que c'est pour les moments où aucun des autres composants ne correspond à l'objectif, ou serait excessif. Il intègre la bibliothèque Motion UI, de sorte que vous pouvez animer l'acte de disparition à votre guise.
Eh bien, le nom sonne comme un élément dans lequel vous pouvez incorporer une vidéo ou un objet Flash (beurk), et vous pourriez le faire, je suppose. Ce que cela signifie vraiment, c'est d'afficher tout objet multimédia, tel qu'une image, à côté des informations textuelles.
Par exemple, vous pouvez placer l'avatar d'un utilisateur à côté de son nom d'utilisateur et son commentaire dans une section de commentaires. Vous pouvez également l'utiliser pour placer la date de sortie d'un film, les acteurs principaux et d'autres métadonnées à côté d'une critique du film. Vérifiez la documentation pour des exemples.
Chaque fonctionnalité a été mise à jour ou réécrite. Cependant, beaucoup sont fonctionnellement inchangés. Vérifiez la documentation pour vous assurer que vous avez les bonnes classes, consultez certaines des mises à niveau et continuez. Voici ces caractéristiques plus ou moins identiques, par ordre alphabétique:
Ouaip. L'attention renouvelée accordée à la création de sites (par opposition à une infrastructure qui tente de répondre aux besoins des sites et des applications) est rafraîchissante et la taille réduite est toujours un plus.
Attendez-vous à ce qu'il soit mis en ligne très très bientôt.