Share
Questo tutorial è finalizzato a iniziare con Neat; una griglia di griglia semantica costruita per Sass e Bourbon.
Bourbon Neat mantiene pulita la tua markup, impedendoti di confonderla con le classi grid, column e row. Invece, si avvale di mixin e applicando i vari mixin al markup esistente è possibile creare layout flessibili e reattivi. Esploriamo i mixin più essenziali:
Nota: Per installare e iniziare con Bourbon Neat, dai un'occhiata al precedente tutorial Bourbon Neat: Semantic, Unopinionated, Responsive Grids.
Questo mixin serve a determinare il contenitore o il wrapper del tuo layout. Applicalo a un elemento e Neat lo centrerà automaticamente nella finestra (aggiungendo margin-left: auto / margin-right: auto), deselezionare i float e applicare l'specificato $ Max-width. È un mixin opzionale (consigliato comunque) e puoi avere più elementi contenitori esterni su una singola pagina. L'unica cosa che non puoi fare è annidarli.
Il contenitore esterno mantiene la tua griglia. Al suo interno, la tua griglia può estendersi su tutte le colonne specificate nel tuo grid-settings file tramite il $ grid-colonne variabile (che ha come valore predefinito 12 colonne). Tutti gli elementi di una riga devono sommarsi al numero totale di colonne specificate in questa variabile.
Nell'esempio fittizio qui sotto, vedrai che il contenitore elemento avvolge un paio di a parte e articolo tag. Si estendono su 3 e 9 colonne rispettivamente e aggiungono fino a 12 colonne come specificato nelle mie impostazioni. Se dovessi superare quel numero di colonne, il layout sarebbe sicuramente interrotto. Pensa al esterno-contenitore mixin è il prerequisito più probabile per aggiungere layout di griglia coerenti all'interno degli elementi del contenitore.
Haml:
"html .container% aside A parte: 3 colonne% articolo Articolo: 9 colonne
% a parte A parte: 3 colonne% articolo Articolo: 9 colonne
% a parte A parte: 3 colonne% articolo Articolo: 9 colonne "
Sass:
"css body background-color: bianco
.container + outer-container background-color: # f5f5f5
a parte, padding articolo: 10px margin-bottom: 20px height: 100px
aside + span-columns (3) background-color: # 81d4fa
article + span-columns (9) + omega background-color: # e64a19 "
I colori di sfondo in questo esempio rendono più facile vedere come i pezzi si incastrano. E non preoccuparti del omega mescolare a questo punto; tutto sarà rivelato a tempo debito.
Nel tuo _grid-settings Sass partial puoi anche specificare a $ Max-width Variabile di Sass che definisce la larghezza massima che deve contenere il contenuto della pagina. Ad esempio, Neat viene fornito con un facilmente modificabile $ Max-width impostazione di 1088px (convertiti in em) fuori dalla scatola.
C'è anche la possibilità di fornire questo mixin con un argomento per a $ Local-max-width se vuoi che un determinato elemento contenitore abbia un altro larghezza massima di quello impostato globalmente in grid-settings. Qui puoi fornire pixel, em o percentuale argomenti. Le colonne della tua griglia all'interno di quel contenitore regolano automaticamente la larghezza, ma il numero di colonne rimane lo stesso.
Sass:
css .container + outer-container (800px) background-color: # f5f5f5 o
css .container + outer-container (80%) background-color: # f5f5f5
Se sei nuovo nella progettazione di griglie, dovresti esaminare l'eccellente Disturbo degli ordini: Grid Principles for Web Design di Khoi Vinh. Lo consiglio vivamente. Un concetto che devi capire subito è che costruisci i tuoi progetti di griglia attraverso una serie di colonne che attraversano la pagina.
L'utilizzo di base di questo è super-diretto con Neat. Scegli un elemento e indicagli quante colonne deve contenere all'interno del numero totale di $ grid-colonne. Lascia che ti mostri le basi.
Haml:
"html .container% aside.first Primo: 2 colonne% article.second Second: 10 colonne
% aside.third Third: 4 colonne% article.fourth Quarto: 8 colonne
% aside.fifth Fifth: 6 colonne% article.sixth Sesto: 6 colonne
% aside.seventh Seventh: 8 colonne% article.eighth Ottavo: 4 colonne
% aside.ninth nono: 10 colonne% article.tenth decimo: 2 colonne "
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: # f5f5f5
a parte, padding articolo: 10px margin-bottom: 20px height: 100px
articolo background-color: # e64a19
a parte il colore di sfondo: # 81d4fa
.first + span-columns (2) .third + span-columns (4) .fifth + span-columns (6) .seventh + span-columns (8) .ninth + span-columns (10)
.second + span-columns (10) .fourth + span-columns (8) .sixth + span-columns (6) .eighth + span-columns (4) .tenth + span-columns (2)
.secondo, quarto, .sixth, .eighth + omega "
Come puoi vedere, ogni riga è composta da un blu a parte a sinistra e uno rosso articolo elemento a destra. Il layout non si interrompe, perché all'interno dell'elemento contenitore esterno il loro numero totale di colonne e la loro larghezza si sommano fino a 12 (come definito in $ grid-colonne) uniformemente.
La parte più interessante è che non è necessario aggiungere alcuna informazione sullo stile alla marcatura - poiché ciò è correlato al livello di presentazione, si definisce solo il modo in cui la griglia viene composta all'interno dei file Sass. Preoccupazioni completamente separate. Ogni designer sano di mente che tocca il tuo lavoro dopo che ti amerai per non inquinare il contenuto con le informazioni sullo stile.
Un ulteriore vantaggio è che puoi assegnare un nome alle classi nel tuo markup in qualunque modo tu voglia o voglia. Nessuno prende queste decisioni per te, che è una benedizione senza alcun travestimento.
Di tanto in tanto potrebbe rivelarsi utile per nidificare velocemente gli elementi della griglia all'interno di un altro.
Sass:
css .some-parent-element + span-columns (10) .some-nested-element + span-columns (5 di 10)
Supponiamo che tu abbia un ampio elemento che si estende per 10 colonne e che dovrebbe incorporare due elementi più piccoli che si estendono su 5 colonne ciascuno. In questo caso, fornire gli elementi nidificati con la dimensione della colonna genitore come argomento per il Span colonne mixin. Diamo un'occhiata ad un esempio più concreto.
Haml:
html .container% aside.first Primo: 2 colonne% article.second% article.third Third: 5 colonne nidificate% article.fourth Quarto: 5 colonne nidificate
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.contenitore + outer-container background-color: # f5f5f5 padding: top: 15px bottom: 15px
a parte, padding articolo: 10px margin-bottom: 20px height: 100px
articolo background-color: # e64a19
a parte il colore di sfondo: # 81d4fa
.in primo luogo, altezza di secondo: 250 px
.second + span-columns (10)
.terzo, .fourth + span-columns (5 di 10) background-color: darken (# e64a19, 6) margin-top: 25px
.first + span-columns (2) padding-top: 25px "
Un altro concetto importante per i neofiti che giocano con le griglie è la grondaia. Questo margine sulla destra, tra gli elementi della griglia, e viene automaticamente creato per ogni elemento della griglia in un contenitore, tranne che per l'ultimo! Anche i gutter si ridimensionano in modo reattivo se ridimensionate la finestra del browser. L'esempio seguente mostra questo spazio tra gli elementi della griglia. La grondaia è rappresentata dallo sfondo grigio che passa attraverso il contenitore esterno.
Haml:
html .container .first 1 col .second 2 col .third 3 col .fourth 3 colfifth 2 col .sixth 1 col
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: # f5f5f5
.prima, .secondo, .third, .fourth, .fifth, .sixth background-color: # 81d4fa padding: 10px height: 200px
.first + span-columns (1)
.second + span-columns (2)
.third + span-columns (3)
.fourth + span-columns (3)
.fifth + span-columns (2)
.sesta colonna + span (1) "
Easy-peasy giusto? Ma indovina cosa succede se raddoppiamo le colonne duplicando la riga proprio sotto di essa?
Oh caro. Quindi cosa è successo qui? Poiché il sesto elemento nella prima riga non è più il ultimo elemento, per impostazione predefinita ottiene anche una grondaia destra (margine). Vorrei essere molto chiaro su questo: per ottenere un layout perfettamente allineato, l'ultimo elemento in un contenitore ha la grondaia rimossa di default. A causa della grondaia aggiunta sul sesto elemento, la larghezza di tutti gli elementi nella prima riga ora supera il totale larghezza il tuo numero di totali colonne può estendersi per riga e la griglia si interrompe.
Niente di troppo tragico, e la soluzione è semplice. Basta trovare l'elemento che ha bisogno di quella grondaia a destra rimosso e applicare il omega mixin lì. Fatto!
Haml:
"html .container .first 1 col .second 2 col .third 3 col .fourth 3 colfifth 2 col .sixth 1 col
.first 1 col .second 2 col .third 3 col .fourth 3 colfifth 2 col .sixth 1 col "
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: # f5f5f5
.prima, .secondo, .third, .fourth, .fifth, .sixth background-color: # 81d4fa padding: 10px height: 200px
.first + span-columns (1)
.second + span-columns (2)
.third + span-columns (3)
.fourth + span-columns (3)
.fifth + span-columns (2)
.sesto + colonne-span (1) + omega "
Ora, ogni elemento cade bene, e nessuna delle righe supera il loro totale larghezza.
Facciamo un piccolo passo avanti. Supponiamo che tu abbia un paio di righe che dovrebbero visualizzare le immagini della stessa dimensione in modo uniforme senza rompere la griglia. Tutto ciò di cui abbiamo bisogno è un paio di elementi che coprano la stessa larghezza, qui Span colonne (2), e metterli in un paio di file. La magia accade con l'argomentazione che fornisci omega con:
css img + omega (6n) Qui, ogni sesto img l'elemento avrà la grondaia destra rimossa e quindi si adatta in modo uniforme a sei 2 colonne elementi nelle 12 colonne del contenitore esterno. pulito!
Haml:
"html .container% img% img% img% img% img% img
% img% img% img% img% img% img
% img% img% img% img% img% img
"
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: # f5f5f5
img + span-columns (2) + omega (6n) height: 200px margin-bottom: 5px background-color: # 81d4fa "
Vuoi solo quattro elementi per riga? Nessun problema! Riduci l'argomento per omega a 4n. Questa tecnica sarà utile durante il prossimo tutorial quando arriveremo a griglie reattive e come è possibile modificare il layout attraverso le query multimediali.
Sass:
css img + omega (4n)
Ti incoraggio a giocare con questo esempio attraverso le penne fornite e a farti un'idea. Non c'è magia qui, ma non sorprenderti se hai bisogno di un po 'più di tempo per avvolgerti nei dettagli. Pasticcia un po 'con le argomentazioni dell'omega e non ho dubbi che ti diventerà chiaro in un batter d'occhio.
Ultime parole di saggezza: in alcuni casi sembra importare in quale ordine si fornisce il Span colonne e omega mixin agli elementi. Il mio consiglio è di applicare sempre Span colonne prima per evitare un comportamento inaspettato.
Questo mixin dovrebbe essere veloce. Se si desidera regolare un elemento spostandolo orizzontalmente verso sinistra o destra, è possibile applicare il cambio mixin e fornisci il numero di colonne che dovrebbe spostare. È possibile utilizzare numeri interi o numeri in virgola mobile.
Sass:
css .some-element-that-needs-adjusting + shift (n)
Fornire un numero positivo (senza unità) di colonne per spostare l'elemento a destra e viceversa. Dietro le quinte, Neat aumenta o diminuisce i valori percentuali di margin-left sull'elemento.
Nota: se usi cambio senza argomenti, per impostazione predefinita spostare (1).
Questo mixin ha la stessa idea di cambio (utilizza shift-in-context sotto il cofano) ma è fatto per elementi di griglia che sono annidati. Ho giocato un po 'in un esempio fittizio con griglie annidate, ma in tutta onestà ho ottenuto gli stessi risultati usando cambio.
Non penso di aver bisogno di approfondire le specifiche di come funziona. È un piccolo aiuto per pulire i fogli di stile e per darti la larghezza di gronda predefinita se fornisci il mixin con predefinito come argomento. Niente di troppo elegante, ma ho pensato di parlarne per completare le opzioni per regolare la spaziatura delle griglie.
Sass:
css .some-element-that-needs-padding + pad (predefinito 10px 20px 30px)
Questo è tutto ciò che devi sapere per iniziare a giocare con le griglie Neat. Questi esempi dovrebbero aver fornito una solida base che ti consente di costruire qualsiasi griglia di cui hai bisogno, per quanto complessa ti piaccia.
Il prossimo tutorial coprirà un altro ciclo di mixaggi Neat e spiegherà anche come è possibile utilizzare le query multimediali e i punti di interruzione per regolare le griglie per modificare le dimensioni delle finestre. Ci vediamo lì!
Accentsconagua