Share
Nella parte iniziale di questa sessione sul Framework di base, abbiamo esaminato come utilizzare questo framework, cosa può fare e come è possibile creare una build personalizzata. In questa parte vedremo in dettaglio il sistema della griglia, dimostrando alcuni esempi mentre procediamo. Scuoteremo un po 'le cose e daremo un'occhiata al plugin Orbit JavaScript Slider; un grande cursore per la visualizzazione di tutti i tipi di contenuti.
In Foundation utilizziamo solo un punto di interruzione principale per la griglia per spostare i layout per schermi con larghezza superiore a 768 px.
La Fondazione è una struttura moderna che privilegia il primo approccio mobile. Ciò significa che il codice e gli asset minimi vengono caricati per primi per aiutare la velocità di rendering della pagina. Come con la maggior parte delle strutture moderne, la Fondazione è pienamente reattiva. Diversamente dalla maggior parte, fa uso di un solo punto di rottura per il cambiamento strutturale. Il punto di interruzione definisce la larghezza della vista a cui viene attivata la griglia di grandi dimensioni, ciò avviene a 768 px.
Il sistema di griglia stesso ha in realtà tre parti; la griglia del desktop, la griglia mobile e la griglia dei blocchi. Poiché la base è mobile, iniziamo con la griglia mobile.
Questa è la Fondazione
Il codice sopra è costituito da tre classi importanti; la prima è la classe "riga" che contiene le nostre colonne, più o meno come una riga in un foglio di calcolo contiene colonne di celle. In questa demo utilizziamo una griglia di dodici colonne, quindi dodici è il numero massimo di colonne che possiamo avere all'interno di una riga. Dicendo che, se ne hai bisogno di più, Foundation supporta fino a sedici colonne che puoi selezionare nel modulo di compilazione personalizzato.
La classe che definisce le colonne qui è piccolo-12, cambiare il numero in questa classe definisce la larghezza di detta colonna. L'utilizzo di "small-12" da solo però definisce solo la larghezza. Per creare effettivamente una colonna, dobbiamo associarla alla classe "columns". Queste tre classi sono la base per il sistema di griglia.
Molto semplicemente, il markup sopra indica che c'è una riga, con un div che occuperà dodici colonne di spazio (100% della larghezza). All'interno delle dodici colonne è il nostro contenuto. Diamo un'occhiata a una versione leggermente più complessa.
Questa è una barra laterale
Questa è l'area del contenuto
In questo codice possiamo vedere che ci sono due div con la classe "columns". Ognuno è accoppiato con una classe (come "small-4") per dettare le dimensioni specifiche. La fondazione quindi allinea queste colonne l'una accanto all'altra anziché l'una sopra l'altra, come nel normale flusso di documenti HTML. Le nostre due colonne occupano rispettivamente una larghezza di quattro colonne e otto colonne. I due hanno una larghezza totale di dodici colonne; "Small-4" è intorno al 33,3% e "small-8" rappresenta circa il 66,6% della larghezza del corpo.
Quello che è importante capire qui è che queste div sono quasi annidabili. Ciò offre una grande flessibilità, ad esempio:
Questa è una barra laterale
# 1
Un titolo del post
Questa è l'area del contenuto
Potete vedere che abbiamo aggiunto in alcuni contenuti alla barra laterale usando una riga, in una colonna, in una riga, questa volta facendo uso di tre colonne di varie dimensioni. Grandi cose eh? Bene, probabilmente è il momento di inserire del codice di grande schermo per sfruttare appieno il sistema di rete.
Questa è una barra laterale
Questa è l'area del contenuto
Qui abbiamo aggiunto una classe extra a ciascuna delle nostre colonne grande-3 e larga 9. Questo dice a Foundation che quando il sito viene visualizzato su uno schermo più grande dovrebbe cambiare la larghezza della barra laterale dal piccolo-4 con del 33,3% a grande-3 che equivale a circa il 25% della larghezza del corpo. La nostra area principale è quindi in grado di crescere, dando più spazio ai contenuti. Questo è un esempio semplicistico ma diventa molto utile quando si tratta di riorganizzare il layout per schermi di dimensioni diverse.
Mentre stiamo osservando il sistema a griglia, vale la pena menzionarlo usando grande centrato e piccola centrato puoi centrare una colonna in modo rapido e semplice, anche se puoi farlo solo se c'è una colonna nella riga. Puoi anche manipolare l'ordine degli elementi usando il Spingere e Tirare classi.
39, ultimo
Questo prende il secondo div, che normalmente verrebbe visualizzato dopo il primo, e lo tira in avanti mentre spinge il primo a mostrarsi in seguito. È quindi possibile avere un elenco a sinistra e il contenuto a destra su schermi di grandi dimensioni, ma spingerlo in basso su schermi di piccole dimensioni.
Avendo coperto i dettagli dei sistemi di griglia, possiamo osservare la griglia dei blocchi che viene utilizzata per mantenere gli elementi di lista equamente distanziati, indipendentemente dalle dimensioni dello schermo. Sono ideali per contenuti bloccati (come quelli generati da un'applicazione) in quanto non richiedono la visualizzazione corretta di righe o colonne. Se il tuo layout è destinato a essere lo stesso sia sul desktop che sul cellulare, devi solo utilizzare il file small-block-grid # classi.
Questo è anche il caso delle griglie di cui abbiamo parlato in precedenza. Invece di usare piccolo-12 e larga 12 avresti solo bisogno piccolo-12. Facile.
Questo conclude i sistemi di griglia che la Fondazione ha da offrire nelle loro forme di base. Ricorda, la griglia piccola cambierà nella griglia grande quando la larghezza dello schermo raggiunge il punto di rottura principale. Usa la piccola griglia per indirizzare i dispositivi più piccoli e quelli grandi per quelli che sono in genere desktop e schermi più grandi.
Scuoteremo un po 'le cose ora, introducendo uno dei numerosi plugin utili di Foundation; Orbita.
Questo pratico plugin può essere usato come slider, permettendoti di inserire immagini, video o contenuti HTML standard. Con un semplice markup è facile da afferrare ed è un vero piacere per gli occhi se usato correttamente.
Orbit usa una struttura di lista; ogni elemento della lista viene visualizzato come una diapositiva. Qui, insieme ai normali tag immagine, le nostre voci di elenco contengono un div con la classe orbita-caption permettendoci di mettere una didascalia su ogni immagine. Orbit prende questo codice e aggiunge un po 'di markup per far funzionare le cose. Include anche una serie di opzioni per la visualizzazione di paginazione, controlli e persino un timer.
Dai un'occhiata ad alcuni esempi di parametri che puoi modificare in Orbita:
timer_speed: 10000, animation_speed: 500, bullet: true, stack_on_small: true
Questi includono velocità, impaginazione dei proiettili e l'opzione di impilare su schermi piccoli. È importante notare che questi vengono passati all'inizializzazione, quindi è necessario prendere lo standard $ (Document) .foundation ();, trovato nella parte inferiore dell'indice.html incluso nel download:
quindi passare le opzioni di orbita.
Oltre alle opzioni mostrate qui puoi aggiungere classi a tutti gli elementi prodotti dal plugin. Queste opzioni extra (e altre) possono essere trovate nei documenti della Fondazione.
Nota: Il download di Foundation includerà tutti i bit e i frammenti di JavaScript che hai scelto, compilati in un file minificato. Questo è indicato nella parte inferiore dell'indice index.html, ma puoi anche scegliere di decommentare i singoli file JavaScript se preferisci:
Vuoi giocare con Foundation in questo momento senza scaricarlo? O forse vuoi un ambiente pulito per testare nuove idee? Quindi controlla questo pratico jsfiddle. Usa l'ultima build di Foundation e include tutti i componenti.
In questa parte della guida della Fondazione abbiamo coperto i sistemi della griglia e abbiamo parlato brevemente del plugin Orbit. Nella prossima puntata vedremo la navigazione e il plugin della sezione, insieme ad un altro strumento utile ...
Accentsconagua