Share
Dans cette partie de notre examen de la Fondation Zurb, nous parlerons de Magellan, qui crée une navigation difficile. Nous examinerons les classes de visibilité, la prise en charge de droite à gauche, les frappes au clavier, les vignettes, la vidéo flexible et les tenants et les aboutissants de zepto. Je vais expliquer les cas d'utilisation de ces fonctionnalités et la meilleure façon de les implémenter dans vos projets..
Au cours de cette session, nous avons couvert une grande partie du cadre de la Fondation et il reste encore beaucoup à faire. Voyons maintenant quelques fonctionnalités que vous pouvez rapidement implémenter dans vos sites. Nous allons commencer avec un plugin JavaScript cette fois, il s'appelle Magellan et vous permet d'ajouter une navigation dynamique à vos projets..
Il n'est pas rare qu'un client demande une navigation qui reste fixe sur la page lorsque l'utilisateur s'éloigne de la navigation standard, par exemple en faisant défiler la page. Magellan vient à la rescousse en ajoutant une navigation fixe à la page une fois que l'utilisateur a dépassé un certain point.
Avec un balisage simple, il est facile de commencer.
- Contact
- Sur
Logé dans une structure de liste en uniforme traditionnelle avec un div pour tout contenir, celui-ci devrait être rapide et facile à utiliser. Il existe deux types d'attributs spéciaux pour Magellan; data-magellan-expiditon qui est utilisé comme type de position et data-magellan-arrival qui peut être jumelé avec les goûts d'une ancre de page.
Comme ce plugin JavaScript est si léger, la seule autre option à connaître est celle qui peut être transmise lors de l’initialisation..
Accentsconagua
$ (document) .foundation ('magellan', // spécifie la classe utilisée pour les sections actives activeClass: 'active', // combien de pixels jusqu'à ce que la barre de magellan colle, 0 = seuil automatique: 0); Encore une fois, deux options ici; définissez vous-même une classe de magellan personnalisée et définissez le point sur la page où magellan se mettra en action.
Maintenant vous le voyez, maintenant vous ne le faites pas! Très souvent, il peut être difficile de re-gérer tout votre contenu pour différentes tailles d'écran. Avec les classes de visibilité de Foundation, vous pouvez simplement afficher plus ou moins d'éléments en fonction du point d'arrêt défini. Commençons par les classes "show", toutes assez simples avec une variété de points d'arrêt pour jouer. Les classes de visibilité me sont particulièrement utiles lorsque je dois ajouter / supprimer des éléments entre un smartphone et un ordinateur de bureau, par exemple pour un appareil comme un iPad..
.show-for-small / * Visible jusqu'à 768px * / .show-for-medium-down / * Visible à partir de 768px vers le bas * / .show-for-medium / * Visible entre 768px et 1280px * / .show-for-medium -up / * Visible à partir de 768px * / .show-for-large-down / * Visible à partir de 1280px down * / .show-for-large / * Visible entre 1280px et 1440px * / .show-for-large-up / * Visible à partir de 1280px * / .show-for-xlarge / * Visible au-dessus de 1440px seulement * /
Pour masquer des éléments à ces mêmes points de rupture, utilisez simplement "masquer" au lieu de "afficher". Peut-être avez-vous besoin d'un cours spécifique basé sur l'orientation? Ceux-ci sont également inclus. Vous remarquerez également des cours de toucher. L'embarras du choix ici.
.show-for-landscape / * Visible pour l'orientation paysage * / .show-for-portrait / * Visible pour l'orientation portrait * / .hide-pour-paysage / * Caché pour l'orientation paysage * / .hide-pour-portrait / * Caché pour l'orientation portrait * / / * Les classes de détection tactile * / .show-for-touch / * Visible pour les appareils tactiles * / .hide-for-touch / * Masqué pour les appareils tactiles * /
Encore une fois, ils vous seront très utiles si vous êtes dans une impasse et que vous avez besoin de cacher certains éléments ou, à l'inverse, si vous vous trouvez dans un vaste espace ouvert, vous pouvez ajouter d'autres éléments..
Je pensais couvrir cela rapidement car personne ne mentionnait vraiment le soutien de droite à gauche.
Ceci est extrêmement pratique si vous avez un projet international avec une base d’utilisateurs centrée sur l’arabe (par exemple). Prenez le persan, qui utilise une version modifiée de l'alphabet arabe, qui nécessite un texte de droite à gauche. Alors que des sites tels que BBC News présentent cette fonctionnalité, ils disposent d’une équipe de développeurs capable de relever ce défi de la conception. En Foundation, tout a été fait pour vous.
Remplacez votre balise html par ceci et vous serez absent. Attends, je sais ce que tu penses, je ne veux pas l'arabe, non? Ne vous inquiétez pas, chinois zh, Farsi fa, hébreu he / iw, japonais ja, ourdou, yiddish yi / ji sont également pris en charge. Changez simplement la valeur de l'attribut "lang" avec votre langue préférée.
Je parie que beaucoup d’entre vous qui ont téléchargé Foundation ont écrasé la case à cocher des frappes au clavier car vous n’êtes pas sûr de ce qu’il était. Droite? Eh bien, si vous n'avez pas déjà consulté la documentation, vous êtes sur le point de le savoir.
Les frappes entourent le texte et les affichent comme une clé. Ainsi, plutôt que de dire contrôle de la presse, alt et delete dans un texte ennuyeux, vous pouvez le préciser et lui donner un sens..
ctrl + alt + del
Simpliste mais efficace, en particulier si des touches sont affectées à certaines fonctions telles que permettre aux boutons directionnels de contrôler le curseur orbite.
Les miniatures sont un moyen rapide de styliser une petite image avec une ancre..
C'est l'un de ces petits détails qui ajoute à la magie de la Fondation. Prends une image, claque-la dans un balise avec une classe de "th". Boom. Travail accompli. C'est idéal pour les projets qui ont peu ou pas de conception, car le développeur peut donner au site une belle apparence avec les styles minimaux inclus dans le cadre..
L’incorporation de vidéos peut s’avérer pénible, en particulier avec les anciens lecteurs vidéo Flash dotés de deux jeux d’attributs de dimension (un inconvénient), ce qui rend les vidéos réactives également, est un effort. Le but est simple. vous voulez ajouter votre vidéo préférée de chats lol sur votre site, mais la chose la plus maudite est écrasée ou coupée lorsque vous la regardez sur votre téléphone tous les soirs avant de vous coucher, ou tous les matins sur votre iPad lorsque vous êtes dans la salle de bain. Avec flex-video, vous pouvez pousser un soupir de soulagement et revenir à l'action lol chat.
Enveloppez toutes les vidéos de sites populaires (comme Youtube et Vimeo) dans une div avec la classe "flex-video", puis la fondation maintiendra le rapport de format en place, redimensionnant la vidéo et empêchant les chats horriblement défigurés ou coupés en lol.
Dans chaque paquet du framework Foundation se trouve une bibliothèque JavaScript spéciale appelée "zepto", qui se comporte de la même manière que jQuery..
Lors du chargement de la page, Foundation cherche à savoir si zepto sera exécuté. Dans ce cas, jQuery est envoyé à l'étape vilaine. Le problème, c'est que zepto n'est pas un remplacement complet de jQuery. En fait, c'est environ 7 100 lignes de code plus léger que jQuery, alors pourquoi est-ce cela et pourquoi Foundation aurait-t-il abandonné jQuery pour cette bibliothèque JavaScript infantile?
Zepto duplique suffisamment le jeu de fonctionnalités jQuery pour faire face à toutes les commandes de base énoncées par Foundation. Utiliser une bibliothèque beaucoup plus légère est un choix judicieux, maintenant que la structure est entièrement mobile: il faut plus que quelques secondes pour charger jQuery sur un périphérique mobile via une connexion cellulaire. Ces 7 100 lignes de code supplémentaires ne sont toutefois pas redondantes, car elles prennent en charge toutes les animations sophistiquées et la compatibilité du navigateur, entre autres choses..
Je suis un très gros utilisateur d'animation jQuery, j'ai donc tendance à tuer zepto dès le départ. Cependant, j'ai récemment travaillé sur un projet qui était uniquement mobile et qui ne nécessitait aucune animation jQuery; L'utilisation de zepto a donné aux utilisateurs un temps de chargement plus rapide de 2,3 secondes. Donc, si vous pouvez vous passer du bloat de jQuery, alors zepto est un excellent substitut..
Donnez à vos utilisateurs quelque chose à faire lorsqu'ils se retrouveront inévitablement dans l'impasse de votre site Web, le jeu 404 envahisseur!
Trouvée sur le site Web Mass: werk, il s’agit d’une manière amusante et potentiellement addictive de se perdre lors de votre prochain projet de site. Utilisez les touches fléchées pour contrôler le pistolet UNE Et S se déplacer et espace tirer (voir ce que j'ai fait là-bas?)
Dans le prochain article, nous examinerons SASS, comment obtenir la version SASS de Foundation, sa configuration, les outils dont vous aurez besoin et un bref aperçu de la manière d'utiliser ce puissant préprocesseur dans vos projets futurs..
