Share
In questa parte del nostro esame della Zurb Foundation parleremo di Magellano, che crea una navigazione appiccicosa. Analizzeremo le classi di visibilità, il supporto da destra a sinistra, le sequenze di tasti, le miniature, i video flessibili e i dettagli di zepto. Spiegherò i casi d'uso di queste funzionalità e il modo migliore per implementarle nei tuoi progetti.
In questa sessione abbiamo coperto un'ampia parte del framework della Fondazione e c'è ancora una buona strada da percorrere. Vediamo ora alcune funzionalità che puoi implementare rapidamente nei tuoi siti. Inizieremo con un plug-in JavaScript questa volta, si chiama Magellan e ti consente di aggiungere la navigazione appiccicosa ai tuoi progetti.
Non è insolito per un cliente chiedere la navigazione che rimane fissa sulla pagina quando l'utente si allontana dalla navigazione standard, ad esempio scorrendo la pagina verso il basso. Magellan viene in soccorso, aggiungendo una navigazione fissa alla pagina una volta che l'utente scorre oltre un certo punto.
Con un semplice markup è facile iniziare.
- Contatto
- Di
Ospitato in una struttura di lista in uniforme tradizionale con un div per contenere tutto, questo dovrebbe essere veloce e facile da installare e in esecuzione. Esistono due tipi di attributi speciali per Magellan; Dati-magellan-expiditon che viene utilizzato come tipo di posizione e Dati-magellan-arrivo che può essere abbinato a quelli di un'ancora di pagina.
Poiché questo plugin JavaScript è così leggero, l'unica altra opzione che devi sapere sono quelle che possono essere passate all'inizializzazione.
Accentsconagua
$ (document) .foundation ('magellan', // specifica la classe utilizzata per le sezioni attive activeClass: 'active', // quanti pixel fino a quando la barra di magellan si blocca, 0 = auto threshold: 0); Quindi ancora, due opzioni qui; imposta una classe magellan personalizzata e imposta il punto sulla pagina in cui Magellano entrerà in azione.
Ora lo vedi, ora non lo fai! Molto spesso può essere difficile ridigitare tutti i contenuti per schermi di dimensioni diverse. Con le classi di visibilità di Foundation puoi semplicemente visualizzare più o meno elementi a seconda del set di breakpoint. Iniziamo con le classi "show", tutte abbastanza semplici con una varietà di punti di rottura con cui giocare. Trovo le classi di visibilità più utili quando devo aggiungere / rimuovere elementi tra smartphone e desktop, magari per un dispositivo come un iPad.
.show-for-small / * Visibile fino a 768px * / .show-for-medium-down / * Visibile da 768px in basso * / .show-for-medium / * Visibile tra 768px e 1280px * / .show-for-medium -up / * Visibile da 768px in su * / .show-for-large-down / * Visibile da 1280px in basso * / .show-for-large / * Visibile tra 1280px e 1440px * / .show-for-large-up / * Visibile da 1280px in su * / .show-for-xlarge / * Visibile sopra solo 1440px * /
Per nascondere gli elementi in questi stessi punti di interruzione, usa "nascondi" invece di "mostra". Forse hai bisogno di una classe specifica basata sull'orientamento? Questi sono anche inclusi. Noterai anche le classi per il tocco. Viziato per scelta qui.
.show-for-landscape / * Visibile per orientamento orizzontale * / .show-for-portrait / * Visibile per orientamento verticale * / .hide-for-landscape / * Nascosto per orientamento orizzontale * / .hide-for-portrait / * Nascosto per orientamento verticale * / / * Le classi di rilevamento tocco * / .show-for-touch / * Visibile per dispositivi abilitati al tocco * / .hide-for-touch / * Nascosto per dispositivi abilitati al tocco * /
Di nuovo, questi saranno davvero utili se ti trovi in un punto stretto e hai bisogno di nascondere alcuni elementi o, al contrario, se ti trovi in un vasto spazio aperto puoi lanciare altri elementi.
Ho pensato di coprirlo rapidamente perché nessuno menziona davvero il supporto da destra a sinistra.
Ciò è estremamente utile se hai mai un progetto internazionale con una base di utenti araba-centrica (ad esempio). Prendi Persian, che usa una versione modificata dell'alfabeto arabo, che richiede un testo da destra a sinistra. Mentre siti come BBC News dimostrano questa funzionalità, hanno un team di sviluppatori in grado di affrontare questa sfida progettuale. In Foundation, è tutto fatto per te.
Sostituisci il tuo tag html con questo e sarai via. Aspetta, so cosa stai pensando, non voglio l'arabo, giusto? Nessun problema, sono supportati anche cinese zh, fa farsi, ebraico he / iw, giapponese ja, urdu, yiddish yi / ji. Basta cambiare il valore dell'attributo "lang" con la lingua preferita.
Scommetto che molti di voi che hanno scaricato Foundation hanno sfogliato la casella di controllo delle sequenze di tasti perché non si è sicuri di cosa si trattasse. Destra? Bene, se non hai già guardato i documenti, stai per scoprirlo.
Le sequenze di tasti racchiudono il testo e le mostrano come una chiave. Quindi, piuttosto che dire "controllo della stampa", "alt" e "cancella" nel vecchio testo noioso, puoi accenderlo e dargli un significato.
ctrl + alt + del
Semplicistico ma efficace, specialmente se si hanno dei tasti assegnati a certe funzioni, ad esempio facendo in modo che i pulsanti direzionali controllino il cursore dell'orbita.
Le miniature sono un modo rapido per modellare una piccola immagine con un'ancora.
Questo è uno di quei piccoli dettagli che aggiunge alla magia che è la Fondazione. Prendi te stesso un'immagine, schiaffeggiarlo in un tag con una classe di "th". Boom. Lavoro fatto. Questo è ottimo per progetti che hanno poco o nessun input di progettazione, in quanto lo sviluppatore può rendere il sito bello con gli stili minimi inclusi nel framework.
Incorporare i video può essere un problema, specialmente con quei vecchi lettori video basati su flash che hanno doppi set di attributi dimensionali (ugh, che inconveniente) rendere anche i video reattivi, è uno sforzo. L'obiettivo è semplice; vuoi aggiungere il tuo video preferito di gatti lol al tuo sito, ma la dannata cosa viene schiacciata o interrotta quando la guardi sul tuo telefono tutte le sere prima di andare a letto o ogni mattina sull'iPad mentre sei in bagno. Con flex-video puoi rilasciare un sospiro di sollievo e tornare a tutta l'azione lol cat.
Avvolgi qualsiasi video da siti famosi (come Youtube e Vimeo) in un div con la classe "flex-video", quindi le basi mantengono le proporzioni in atto, ridimensionano il video e prevengono orribilmente sfigurate o tagliate a metà di gatti lol.
In ogni pacchetto del framework Foundation c'è una libreria JavaScript speciale chiamata "zepto", che si comporta in modo simile a jQuery.
Nel caricamento della pagina, Foundation cerca di vedere se verrà eseguito zepto, altrimenti jQuery verrà inviato al passo impacciato. Il problema è che, tuttavia, zepto non è un sostituto completo di jQuery. In realtà, sono circa 7.100 linee di codice più leggero di jQuery, quindi perché è questo e perché Foundation lascerebbe jQuery per questa libreria JavaScript infantile?
Zepto duplica abbastanza del set di funzioni jQuery per far fronte a tutti i comandi di base che la Foundation presenta. L'uso di una libreria molto più leggera è una mossa intelligente ora che il framework è mobile-first - ci vuole più di qualche secondo per caricare jQuery su un dispositivo mobile su una connessione cellulare. Quelle ulteriori 7.100 linee di codice non sono ridondanti, dato che si occupano di tutte le animazioni di fantasia e della compatibilità del browser, tra le altre cose.
Sono un utente di animazione jQuery piuttosto pesante, quindi tendo ad uccidere zepto sin dall'inizio. Tuttavia, di recente ho lavorato a un progetto che era solo mobile e che non richiedeva alcuna animazione jQuery; usando zepto abbiamo dato agli utenti un tempo di caricamento completo di 2,3 secondi più veloce. Quindi se riesci a fare a meno del jolly di jQuery, allora Zepto è una fantastica sostituzione di ossa nude.
Offri ai tuoi utenti qualcosa da fare quando inevitabilmente si perdono in un vicolo cieco sul tuo sito web, il gioco dell'invasore 404!
Trovato sulla massa: sito web di werk, questo è un modo divertente e potenzialmente avvincente di perdersi nel prossimo progetto del sito. Usa i tasti freccia per controllare la pistola UN & S spostare e spazio sparare (vedi cosa ho fatto lì?)
Nel prossimo articolo vedremo SASS, come ottenere la versione SASS di Foundation, come configurarla, gli strumenti necessari e una breve panoramica su come utilizzare questo potente preprocessore nei tuoi progetti futuri.
