Le griglie di costruzione sono state moderatamente complicate prima del responsive design, in questi giorni possono essere davvero intimidatorie. Quando ti immergi in un layout complesso, è facile perdersi in tutte le matematiche e percentuali. Certo, i nerd hardcore tra noi amano giocare con questa roba, ma alcuni sviluppatori vogliono solo mettersi al lavoro!
Oggi esamineremo un fantastico sistema a griglia che ti aiuterà a configurare le tue griglie reattive con pochissimo sforzo. È semantico, costruito per un design reattivo, completamente flessibile per il tuo modo di lavorare e potenziato da Sass. Scopri le reti Zen.
Guardalo in azione
Se vuoi dare una sbirciatina a quello che stiamo costruendo oggi con le Zen Grids, clicca sul link qui sotto.
demo: Clicca qui per il lancio.
Cosa sono le Zen Grids?
So cosa stai pensando,? Un altro sistema di grid fuori di testa! ?? Zen Grids è diverso però. Giusto, lo dicono tutti. Questo vale davvero la pena dare un'occhiata.
Ci sono molte ragioni per cui penso che le Zen Grid siano uno strumento davvero eccezionale che dovresti controllare, eccone alcune:
Nessuna delle cose che odiate
Ci sono molti motivi per odiare i sistemi di grid. Nomi di classe brutti, non semantici, una schifezza di divs apparentemente ridondanti ma in qualche modo necessari; La lista potrebbe continuare all'infinito. Zen Grids non ha nessuna di quelle cose però. Imposta il tuo documento come vuoi e si integra perfettamente nel tuo flusso di lavoro.
Costruito su Sass
So che questo è un aspetto negativo per molti di voi, ma è un vantaggio per me. Sass è la ragione per cui le Zen Grids possono essere semantiche. I file SCSS si occupano di tutti i calcoli e ti consentono di applicare i mix di griglia quando e dove vuoi.
Responsabile amico
Tecnicamente, non chiamerei Zen Grid un sistema a griglia reattivo (anche se lo fa in quanto tale) perché in realtà non viene fornito con le funzionalità di media query integrate nel modo in cui Bootstrap funziona.
Lo chiamerei a fluido sistema di rete perché è costruito su percentuali. Detto questo, è abbastanza facile collegare le Griglie Zen a alcune delle tue query sui media e renderle reattive.
Facile come 1, 2, 3
Le Griglie Zen sono davvero, davvero facili da usare. 1 istruzione import, 2 variabili e 3 mixin. Questo è tutto ciò che serve per costruire un layout di base. Nei miei esperimenti, ho spinto questo a quattro mixin (ne serve uno extra per il nesting), ma non è ancora male se si considera la complessità che può essere raggiunta.
Prima di iniziare
Sto per immergermi e insegnarti come usare questo ventosa, ma prima di iniziare, è necessario un piccolo setup. Innanzitutto, è necessario assicurarsi di aver installato Sass e Compass.
Prendi Scout
Se sei a tuo agio con Ruby, Terminals e Shell Scripts, tutto dovrebbe essere abbastanza semplice. Per il resto di noi, consiglio semplicemente di scaricare Scout e di chiamarlo un giorno. Scout è gratuito, open source e multipiattaforma. Indicalo in una cartella contenente i file SCSS e li compilerà automaticamente in CSS. Codekit e LiveReload sono ancora meglio, ma ti costeranno.
Ottieni le griglie Zen
Una volta che hai configurato Sass e Compass, prendi le Zen Grid da GitHub. Scarica il .zip e lancia tutto tranne i? Fogli di stile? cartella. Qui è dove troverai i file SCSS che alimenteranno la tua rete.
Iniziare
Per iniziare, ti consiglio di scavare nel tuo download e trovare il? _Grids.scss? file. Estrarlo e inserirlo in una nuova cartella di progetto, quindi creare un nuovo file SCSS e importarlo.
Ecco, ora siamo pronti per costruire una griglia!
Avvia un contenitore
Per iniziare una nuova griglia, avrai bisogno di una sorta di contenitore. Non ritengo che questo sia un vero problema dato che in genere lo faccio anche senza alcun tipo di sistema di terze parti.
Qui ho creato un div con un contenitore di classe? ma ricorda che ti ho promesso che le Zen Grid si collegherebbero al tuo flusso di lavoro specifico. Ciò significa che il contenitore può essere tutto ciò che vuoi. Usa una sezione invece di una div, cambia la classe in? Main ,? andare fuori di testa. Non importa davvero!
Ora vai al tuo SCSS e includi il zen-grid-contenitore mixin usando la sintassi standard di Sass.
Quello che fa è dire a Zen Grids che vuoi che questo oggetto diventi un contenitore. Mentre ci sei, potresti anche impostare una larghezza e centrare il div.
Imposta le variabili
Ora è il momento di impostare le variabili per il conteggio delle colonne e la grondaia. Mi piace farlo all'interno della classe contenitore, perché lo cambieremo più tardi ed è più facile continuare così in questo modo.
Per iniziare, impostare zen-column-count a 3 e zen-grondaia larghezza a 10px. Ovviamente, questo ci darà un layout a tre colonne con una grondaia di 10px tra ogni colonna.
Crea qualche contenuto
Successivamente, vorremmo creare del contenuto HTML. Dato che stiamo solo imparando a usare le Griglie Zen, userò alcuni contenuti super generici qui come esempio. Qui ho creato tre div, ciascuno contenente un semplice paragrafo:
Tieni presente che questi nomi di classe sono completamente arbitrari e numerati per aiutarci a tenere traccia di tutto negli esempi. Hai la completa libertà di usare qualsiasi nome di classe che scegli. Il tuo dovrebbe riflettere le pratiche semantiche standard.
CSS di base
Ancora una volta, per il solo scopo della demo, applicherò alcuni stili generici a ogni blocco di contenuti che creiamo. Questo ci aiuterà a vedere cosa succede in ogni blocco.
Flusso del contenuto
Abbiamo tre div con cui lavorare e abbiamo già impostato tre colonne, quindi assegniamo un div a ogni colonna. Fare questo richiede il zen-grid-voce mixin. Ecco come apparirà nel nostro SCSS.
Cosa sta succedendo con questa sintassi? Ecco una tabella a portata di mano per aiutarti:
Come puoi vedere, il primo numero determina quante colonne si estenderanno. Il secondo numero determina la posizione di quell'elemento. Nel nostro esempio sopra, abbiamo posizionato i tre div in slot 1, 2 e 3 consecutivamente.
Ciò crea una griglia semplice divisa in terzi con ciascun blocco di contenuto che occupa un terzo:
Let's Get Complicated
Bene, ora conosciamo le basi su come funziona questa cosa, quindi passiamo a un layout molto più complesso. Invece di tre blocchi di contenuti, ne avremo otto. Useremo diversi contenitori, nuove file e persino qualche nidificazione solo per spingere il nostro test al limite.
HTML
Questa volta stiamo per lanciare una grande porzione di HTML. Stiamo ancora utilizzando la stessa configurazione di base di prima, l'unica vera complicazione è che il? Nested? il contenitore è in realtà seduto all'interno del nostro altro contenitore.
Per rendere i blocchi di contenuti belli questa volta, ecco lo stile che useremo:
annidamento
Come prima, iniziamo con tre blocchi di contenuti. La parte difficile è che il terzo blocco di contenuto è in realtà un contenitore nidificato, che contiene altri due blocchi. L'impostazione di questo è in realtà davvero facile.
Proprio come prima, usa zen-grid-item (1, 3) sul? .nested? classe, ma anche includere zen-nested-contenitore () per indicare che questo sarà un contenitore annidato.
Nessun problema, giusto? Ora aggiungiamo i blocchi tre e quattro nel contenitore annidato. Tieni presente che il contenitore nidificato conterrà anche tre colonne, quindi voglio che i blocchi tre e quattro occupino ciascuno tre colonne (saranno larghe e impilate l'una sull'altra).
Dai un'occhiata al codice per il blocco quattro qui. Per iniziare, ho usato il zen-chiaro () mixin. Ecco come si crea una nuova riga. Senza questo, i blocchi tre e il blocco quattro occuperebbero lo stesso posto.
Ecco l'effetto che questo ha sul nostro layout:
Bello! Questo è esattamente ciò che stavamo girando per raggiungere. Il nostro contenuto è diviso in tre blocchi con il blocco all'estrema destra diviso in due sotto-blocchi. Tutto senza un solo pezzo di matematica!
Cambiare la griglia
Finiremo qui codificando container2. Questo contenitore contiene quattro blocchi di contenuti e mi piacerebbe trasferirli tutti uno accanto all'altro, ma la nostra configurazione ha solo tre colonne? e adesso?
La risposta è, naturalmente, che dobbiamo ripristinare le nostre variabili quando configuriamo il nuovo contenitore. Non ero sicuro che Sass lo avrebbe gestito correttamente quando lo provai per la prima volta, ma sembra funzionare perfettamente. Ecco il codice:
Come potete vedere, siamo andati con quattro colonne e una gronda 10px questa volta. Quindi impostiamo ciascun blocco di contenuto su uno slot in larghezza e li posizioniamo consecutivamente attraverso le colonne.
Ci siamo, un layout decentemente complesso usando solo alcuni mix facili da applicare. Per la flessibilità offerta da questo strumento, in realtà non è molto più facile di questa gente.
Rendilo reattivo
Prima ho detto che era facile rendere la nostra rete reattiva. Finora è fluido, quindi è ridimensionato in base alla dimensione della vedova, ma non si riflette mai. Risolviamolo con una rapida query multimediale:
Qui ho creato una query multimediale per 700px e ho completamente ridisegnato il layout per adattarlo al viewport più stretto. Ecco come sarà dopo il punto di interruzione.
Quanto è bello? Abbiamo appena tracciato un layout estremamente complesso e reattivo senza alcun calcolo matematico evitando al contempo nomi di classi non semantici. È un'impresa piuttosto seria.
Cheat Sheet
Abbiamo coperto un sacco di roba qui sopra, quindi lascia che ti scriva per te in un bel piccolo cheat sheet:
- Imposta contenitore: @ include il contenitore zen-grid
- Imposta contenitore nidificato: @include zen-nested-container ()
- Imposta il conteggio delle colonne: $ zen-column-count: 2
- Imposta larghezza Gutter: $ zen-gutter-width: 10px
- Imposta span e posizione dell'elemento: @include zen-grid-item (1, 1)
- Nuova fila @include zen-clear ()
Cosa pensi?
Quindi questo è il sistema Zen Grids. Personalmente, penso che sia un sistema di griglie molto utile che funziona abbastanza bene. Cosa pensi? Questo ti farà risparmiare un sacco di tempo e fatica nel tuo flusso di lavoro reattivo o aggiungerebbe molte complicazioni inutili ad esso? Lascia un commento e fammi sapere.