In passato, abbiamo discusso di Twitter Bootstrap un po '. Molto più del suo più degno concorrente: la Zurb's Foundation. Ora alla sua terza iterazione, Foundation è un framework di front end robusto e reattivo, utilizzato da centinaia di sviluppatori ogni giorno.
Nel corso di diversi articoli, faremo il salto e daremo un'occhiata ai suoi vari aspetti dal punto di vista di un principiante completo. L'argomento di oggi è la mia parte preferita: la griglia. Segui per vedere come funziona!
Grid Crazy
Se sei un lettore abituale di Design Shack, probabilmente già saprai che sono un po 'da matto. Il layout è l'aspetto dei CSS che mi affascina di più e mi piace semplicemente scavare e giocare con i diversi sistemi di griglia creati dalle persone. No, non sono sempre perfettamente semantici (anche se alcuni lo sono), ma possono essere un modo incredibilmente utile per scartare layout davvero complessi con uno sforzo minimo.
La griglia che viene costruita nella Fondazione non fa eccezione a questa regola. È straordinariamente facile da usare, ha tutte le funzionalità che si possono desiderare e si adatta abbastanza bene a diversi viewport. Diamo un'occhiata.
La griglia della Fondazione
Come innumerevoli altre griglie, la fondazione Grid è costruita su un sistema a dodici colonne. Per impostazione predefinita, la larghezza della griglia è pari a 940 px quando è piena. Tuttavia, la griglia è fluida, così come il tuo viewport diventa più stretto di 940px, la griglia si adatterà.
Ciò significa che a livello di codice è ovviamente che ogni colonna della griglia non ha una larghezza statica, ma viene invece assegnata utilizzando le percentuali. Se apriamo il CSS, possiamo vedere che questo è davvero il caso:
di risposta
La natura fluida della griglia della Fondazione aiuta ad adattarsi man mano che la finestra si restringe, ma una volta raggiunto un valore di 767px, viene avviata una query multimediale che semplifica il layout complesso in un'unica colonna. Ovviamente, una soluzione così semplice potrebbe non essere sempre auspicabile, quindi ci sono modi per riportare intenzionalmente il layout in una griglia mobile a quattro colonne. Vedremo come farlo più tardi.
Iniziare
Se sei abituato ai sistemi a griglia, Foundation dovrebbe essere davvero facile da imparare. Se sei completamente nuovo alle griglie, non ti preoccupare, ti guiderò attraverso e ti accorgerai in pochissimo tempo.
Fondamentalmente, Foundation ha fatto la maggior parte del pesante lavoro di layout CSS per te. Il centro 940px della pagina è suddiviso in dodici colonne e varie combinazioni di colonne possibili sono assegnate alle classi. Ciò significa che, per eseguire un layout di base, non è necessario scrivere un singolo carattere di CSS. Tutto quello che devi fare è usare le classi giuste nel tuo codice HTML.
Creare una riga
La prima cosa che devi fare quando aggiungi contenuti alla pagina è creare una riga. Questo è esattamente ciò che sembra, un pezzo di contenuto che verrà visualizzato sullo stesso piano orizzontale. Tutto il galleggiamento, le imbottiture, i margini e le varie complessità del layout sono stati curati in modo che tu possa concentrarti sui tuoi contenuti.
Per iniziare una riga, basta creare un div con una classe di? Row ?.
Quanto è stato facile? Ora vediamo come aggiungere alcune colonne.
Aggiunta di colonne
Per aggiungere colonne di contenuti, devi creare un nuovo div e assegnare due classi. La prima classe è un numero che corrisponde al numero di colonne che si desidera che questo contenuto si estenda. Quindi se vuoi che il tuo contenuto occupi tre delle dodici colonne disponibili, assegni "tre"? come una classe.
La seconda classe che applichi è? Columns? (o? colonna?). Questo è uniformemente applicato a tutti i tuoi div che vuoi avere il trattamento standard della colonna Foundation. Combina queste due classi e dovresti avere qualcosa di simile a questo:
Qui ho un bel piccolo contenitore che imposterà automaticamente i limiti sul contenuto in modo che non occupi più di otto colonne. Ora, tipicamente (anche se non sempre), vorrai mangiare tutte le dodici colonne in una data riga. Abbiamo già utilizzato otto colonne nel nostro primo div, quindi se ne vogliamo ancora una, scriveremo? Quattro colonne? nell'area della classe (8 + 4 = 12).
Dopo aver scritto solo questo codice nel corpo di un documento HTML, se diamo un'occhiata alla nostra pagina in un browser, vedremo questo:
Come puoi vedere, abbiamo effettivamente creato due blocchi di testo con un rapporto larghezza di 2: 1. Questo ha perfettamente senso perché abbiamo usato le classi otto e quattro, che hanno anche un rapporto 2: 1. Quando questo fa davvero clic nel tuo cervello, diventa un concetto potente perché puoi improvvisamente rimuovere qualsiasi layout che desideri usando solo pochi nomi di classe.
Si noti che non è necessario riempire tutte le dodici colonne. Usa la? Fine? classe se vuoi che un div sia l'ultimo di una riga che non si estenda su dodici colonne.
Andare avanti
Usando i principi che abbiamo appena appreso, possiamo ottenere tutti i tipi di layout diversi. Diciamo che volevamo una riga divisa in quattro sezioni uguali. Tutto quello che dobbiamo fare è usare il? Tre? classe.
A questo punto dovresti avere il controllo di come funziona. Se hai la capacità matematica di dividere le cose in dodici, allora puoi usare questa struttura. Quindi possiamo vedere come funziona su una scala più grande, saltiamo in un layout di pagina complesso su tutto.
Non lasciare che questo grosso pezzo di codice ti intimidisca, utilizza gli stessi identici principi che abbiamo utilizzato negli esempi più piccoli.
Questo creerà un div che si estende su sei colonne e lo centrerà sulla pagina. Se abbiamo gettato una regola orizzontale qui, avremmo una piccola linea di divisione centrata su una piccola colonna.
Oltre a centrare i div, puoi anche sfalsarli e riorganizzarli. Per compensare un div, usare "offset-by". Quindi? Offset-by-one? lo compenserà di uno slot e? offset-by-two?, beh, si ottiene il punto.
Qui puoi vedere che i numeri delle classi ne sommano solo dieci, lasciando due punti rimasti. Conto per questo con un offset a due colonne. Ecco il risultato.
Per riorganizzare i div in modo diverso nell'output rispetto a quelli che appaiono nell'ordine sorgente, si usano le classi push e pull, come nel vecchio sistema a griglia 960.
Ora controlla il risultato. Anche se il? Tre? la colonna viene prima del? nove? colonna nella sorgente, l'anteprima dal vivo mostra il contrario.
La logica dietro questo è di solito legata al SEO. Supponiamo che tu volessi il nome della tua azienda come intestazione nel mezzo della pagina tra due altre colonne, potrebbe essere migliore per SEO se il nome della società è più alto nella gerarchia di origine.
Utilizzando la griglia mobile a quattro colonne
Di default, Foundation è reattivo, ma il comportamento di questo aspetto del framework è molto semplice. Tornando alla nostra grande demo live nel? Andando oltre? sezione precedente, quando il viewport diventa troppo stretto, tutto viene semplicemente schiaffeggiato in una singola colonna:
Funziona, ma non è molto carina o robusta. Fortunatamente, c'è una seconda griglia a cui hai accesso che si attiva con la query multimediale mobile. Questa griglia è composta da quattro colonne e utilizza le seguenti classi:
- mobili-one
- mobili-due
- mobile a tre
- mobili-four
Queste classi sono implementate esattamente come quelle per la griglia a dimensione intera. Applicando? Mobile-tre? farà sì che un elemento si estenda su tre delle quattro colonne disponibili nella griglia mobile. Con questo in mente, rielaboriamo il layout precedente: