Share
In dit deel van ons onderzoek van de Zurb Foundation zullen we het hebben over Magellan, dat een kleverige navigatie creëert. We zullen kijken naar zichtbaarheidsklassen, rechts-naar-links-ondersteuning, toetsaanslagen, miniaturen, flexibele video en de ins en outs van zepto. Ik zal de gebruikscasussen van deze functies uitleggen en aangeven hoe ze het best in uw projecten kunnen worden geïmplementeerd.
In deze sessie hebben we een groot deel van het Foundation-raamwerk behandeld en er is nog een goede manier om te gaan. Laten we nu eens kijken naar enkele functies die u snel kunt implementeren op uw sites. We beginnen deze keer met een JavaScript-plug-in, het heet Magellan en stelt u in staat om sticky-navigatie toe te voegen aan uw projecten.
Het is niet ongebruikelijk dat een client om navigatie vraagt die op de pagina blijft staan wanneer de gebruiker weg navigeert van de standaardnavigatie, zoals naar beneden scrollen op de pagina. Magellan komt te hulp en voegt vaste navigatie toe aan de pagina zodra de gebruiker voorbij een bepaald punt scrolt.
Met eenvoudige markeringen is het gemakkelijk om te beginnen.
- Contact
- Wat betreft
Gehuisvest in een traditionele geuniformeerde lijststructuur met een div die alles bevat, zou dit snel en gemakkelijk in gebruik moeten worden genomen. Er zijn twee soorten speciale kenmerken voor Magellan; data-magellan-expiditon die wordt gebruikt als het positietype en data-magellan-arrival die kan worden gekoppeld met bijvoorbeeld een pagina-anker.
Omdat deze JavaScript-plug-in zo licht is, zijn de enige andere opties die u moet kennen die welke bij initialisatie kunnen worden doorgegeven.
Accentsconagua
$ (document) .foundation ('magellan', // specificeer de klasse die wordt gebruikt voor actieve secties activeClass: 'active', // hoeveel pixels tot de magellan-balk blijft hangen, 0 = automatische drempelwaarde: 0); Dus nogmaals, twee opties hier; Stel jezelf een aangepaste magellan-klasse in en bepaal het punt op de pagina waar magellan in actie komt.
Nu zie je het, nu niet! Heel vaak kan het lastig zijn om al je inhoud opnieuw te jiggen voor verschillende schermformaten. Met de zichtbaarheidsklassen van Foundation kunt u eenvoudig meer of minder elementen weergeven, afhankelijk van het ingestelde onderbrekingspunt. Laten we beginnen met de "show" -klassen, allemaal vrij eenvoudig met een verscheidenheid aan breekpunten om mee te spelen. Ik vind zichtbaarheidsklassen het nuttigst wanneer ik elementen tussen smartphone en desktop moet toevoegen / verwijderen, misschien voor een apparaat zoals een iPad.
.show-for-small / * Zichtbaar tot 768px * / .show-for-medium-down / * Zichtbaar vanaf 768px omlaag * / .show-for-medium / * Zichtbaar tussen 768px en 1280px * / .show-for-medium -up / * Zichtbaar vanaf 768 px omhoog * / .show-for-large-down / * Zichtbaar vanaf 1280 px naar beneden * / .show-for-large / * Zichtbaar tussen 1280 px en 1440 px * / .show-for-large-up / * Zichtbaar vanaf 1280 px * / .show-for-xlarge / * Zichtbaar vanaf 1440 pixels alleen * /
Om elementen op dezelfde breekpunten te verbergen, gebruikt u "verbergen" in plaats van "weergeven". Misschien heb je een specifieke op oriëntatie gebaseerde les nodig? Deze zijn ook inbegrepen. Je zult ook lessen opmerken voor aanrakingen. Verwend voor keuze hier.
.show-for-landscape / * Zichtbaar voor liggende oriëntatie * / .show-voor-portret / * Zichtbaar voor portretoriëntatie * / .hide-for-landscape / * Verborgen voor liggende oriëntatie * / .hide-for-portrait / * Verborgen voor portretoriëntatie * / / * De touchdetectieklassen * / .show-for-touch / * Zichtbaar voor apparaten met aanraakbediening * / .hide-for-touch / * Verborgen voor apparaten met aanraakbediening * /
Nogmaals, deze komen echt van pas als je je op een krappe plek bevindt en sommige elementen moet verbergen of, het tegenovergestelde, als je jezelf in een grote open ruimte bevindt, kun je wat meer elementen inwerpen.
Ik dacht dat ik dit snel zou behandelen omdat niemand echt van rechts-naar-links-ondersteuning spreekt.
Dit is uiterst handig als je ooit een internationaal project hebt met een arabisch-centraal (bijvoorbeeld) gebruikersbestand. Neem Perzisch, dat een aangepaste versie van het Arabische alfabet gebruikt, waarvoor van rechts-naar-links tekst vereist is. Waar sites zoals BBC News deze functionaliteit demonstreren, hebben ze een team van ontwikkelaars in staat om deze ontwerpuitdaging aan te gaan. In Foundation is het allemaal voor je gedaan.
Vervang je html-tag hiermee en je bent weg. Wacht, ik weet wat je denkt, ik wil geen Arabisch, toch? Geen zorgen, Chinese zh, Farsi fa, Hebreeuws hij / ik, Japans ja, Urdu ur, Jiddisch yi / ji worden ook ondersteund. Verander gewoon de waarde van het "lang" -attribuut in de taal van uw voorkeur.
Ik durf te wedden dat velen van jullie die de Foundation hebben gedownload over het aankruisvakje met toetsaanslagen hebben geschommeld omdat je niet zeker wist wat het was. Rechts? Als u de documenten nog niet hebt bekeken, staat u op het punt om dat uit te zoeken.
Toetsaanslagen omsluiten tekst en tonen ze als een sleutel. Dus in plaats van het indrukken van drukknoppen, alt en verwijderen in saaie oude tekst, kun je het opfrissen en het een betekenis geven.
ctrl + alt + del
Simplistisch maar effectief, vooral als je toetsen hebt toegewezen aan bepaalde functies, zoals het maken van de richtingsknoppen die de schuifregelaar voor de baan besturen.
Thumbnails zijn een snelle manier om een kleine afbeelding met een anker te stylen.
Dit is een van die kleine details die bijdraagt aan de magie die Stichting is. Grijp jezelf een beeld, gooi het in een tag met een klasse van "th". Boom. Klus geklaard. Dit is geweldig voor projecten die weinig of geen ontwerpinvoer hebben, omdat de ontwikkelaar de site er geweldig kan laten uitzien met de minimale stijlen in het kader.
Het insluiten van video's kan lastig zijn, vooral met die oude flash-gebaseerde videospelers die dubbele sets van dimensiekenmerken hebben (uh, wat een ongemak) waardoor video's ook responsief zijn, is een inspanning. Het doel is eenvoudig; je wilt je favoriete video van lol-katten toevoegen aan je site, maar het verdraaide ding wordt geplet, of afgesneden wanneer je het elke avond voor het slapengaan op je telefoon bekijkt, of elke ochtend op de iPad terwijl je in de badkamer bent. Met flex-video kun je een zucht van opluchting loslaten en teruggaan naar alle lol cat-acties.
Wikkel video van populaire sites (zoals Youtube en Vimeo) in een div met de "flex-video" -klasse, dan zal stichting de beeldverhouding op zijn plaats houden, de video schalen en vreselijk misvormd of gehakt in halve lol katten voorkomen.
In elk pakket van het Foundation-raamwerk ligt een speciale JavaScript-bibliotheek genaamd "zepto", die zich op ongeveer dezelfde manier gedraagt als jQuery.
Op de pagina laadt Foundation om te zien of zepto zal worden uitgevoerd, als dat zo is, dan wordt jQuery naar de ondeugende stap gestuurd. Het probleem is echter dat zepto geen volledige vervanging is voor jQuery. In feite zijn het ruwweg 7.100 regels code lichter dan jQuery, dus waarom is dit en waarom zou Foundation jQuery droppen voor deze infantiele JavaScript-bibliotheek??
Zepto dupliceert genoeg van de jQuery-functieset om alle basisopdrachten die Foundation biedt te verwerken. Het gebruik van een bibliotheek die veel lichter is, is een slimme zet nu het framework voor het eerst mobiel is - het kost meer dan een paar seconden om jQuery op een mobiel apparaat via een mobiele verbinding te laden. Die extra 7.100 regels code zijn echter niet overbodig, omdat ze zorgen voor alle mooie animaties en browsercompatibiliteit, onder andere.
Ik ben een behoorlijk zware jQuery-animatiegebruiker, dus ik heb de neiging om gewoon Zepto te doden zodra ik begin. Onlangs werkte ik echter aan een project dat alleen voor mobiel was en waarvoor geen jQuery-animatie nodig was; het gebruik van zepto gaf gebruikers een volledige 2,3 seconden snellere laadtijd. Dus als je zonder de bloat van jQuery kunt, dan is zepto een fantastische vervanging voor blote botten.
Geef je gebruikers iets te doen wanneer ze onvermijdelijk verloren raken langs een doodlopende weg op je website, het 404-indringerspel!
Gevonden op de massa: werk website, dit is een leuke en potentieel verslavende manier om te verdwalen op je volgende site project. Gebruik je pijltjestoetsen om het pistool te besturen EEN & S bewegen en ruimte om te vuren (zie wat ik daar deed?)
In het volgende artikel zullen we kijken naar SASS, hoe je de SASS-versie van Foundation kunt krijgen, hoe je het kunt instellen, welke hulpmiddelen je nodig hebt en een kort overzicht van hoe je deze machtige stijl-preprocessor in je toekomstige projecten kunt gebruiken.
