Share
Ora che hai le basi alla cintura, in questo secondo tutorial sui mixaggi Neat mi tufferò un po 'più a fondo, esplorando alcuni altri mix e introducendo una funzione.
Daremo un'occhiata a quanto segue:
Negli ultimi due anni, l'importanza di design flessibili che rispondono al panorama in continua evoluzione delle dimensioni e dei dispositivi dello schermo, è stata resa abbastanza chiara. In questo senso, Bourbon Neat ti sostiene, offrendoti un approccio elegante per gestire le query multimediali per le tue griglie. Attraverso l'uso di query multimediali mirate, il layout può essere adattato a una vasta gamma di dispositivi senza creare problemi. Il design reattivo è qui per rimanere e un uso responsabile e sostenibile delle domande dei media è il re.
Qualcosa da evitare è ciò che potresti chiamare interrogare gli spaghetti-un pasticcio aggrovigliato di domande multimediali che diventa rapidamente difficile da mantenere. Mantenere gestibili le query multimediali è di cruciale importanza. Questo mixin non è un antidoto perfetto, ma incoraggia definitivamente un approccio ASCIUTO ad affrontare le richieste dei media in modo sano, specialmente se abbinato al new-breakpoint funzione. Come, ti sento chiedere?
È possibile scrivere blocchi di query multimediali che possono assumere contesti di griglia. Supponiamo tu abbia due elementi che sommano fino a 12 colonne, come definito in $ totali colonne dentro il tuo _grid-settings file. Questi elementi occupano rispettivamente 3 e 9 colonne su schermi di dimensioni desktop, che consentono contenitori esterni larghi 1088px. Per i dispositivi più piccoli o le dimensioni del viewport, consentire media [query] mixin sapere a quale dimensione il contesto di 12 colonne deve passare a un altro numero e regolare di conseguenza le dimensioni degli elementi reattivi all'interno di quel nuovo contesto. Boom!
Haml:
html .container% aside 3 col / 1 col% article 9 col / 2 col
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: # f5f5f5
a parte, padding articolo: 10px margin-bottom: 20px height: 100px
aside + span-columns (3) background-color: # 81d4fa + media (max-larghezza 700px, 4) + span-columns (1)
article + span-columns (9) background-color: # e64a19 + media (max-width 700px, 4) + span-columns (2) "
Qui, ho fornito il media mixin con una funzione multimediale tramite larghezza massima 700 px e un nuovo contesto di griglia di 4 colonne per il $ totali colonne larghezza massima dell'elemento. Avendo stabilito un nuovo contesto di griglia per entrambi a parte e articolo elementi per la dimensione del viewport di 700px massimo, avevo solo bisogno di dire agli elementi quante colonne possono ora includere nel nuovo totale di 4 colonne. Personalmente, penso che sia leggibile e facile da organizzare. Diventa ancora più interessante una volta riutilizzato contesti dei media (media query / contesto griglia) tramite il new-breakpoint funzione e salvarli su una variabile Sass.
Nota: Se fornisci questo mixin con solo un valore di pixel, senza alcuna caratteristica multimediale specifica:
Sass:
css .some-responsive-element + span-columns (8) + media (700px) + span-columns (4)
allora Neat userà $ Default-funzione che è min-width. Inoltre, fornire un contesto di griglia è facoltativo e il valore predefinito è quello impostato $ totali colonne nel tuo _grid-settings parziale.
Probabilmente ti starai chiedendo cosa succede con l'approccio DRY che ho menzionato un paio di paragrafi prima, giusto? Questo è lo spirito!
Questa pratica funzione Sass personalizzata è il Robin per il tuo media Batman, impedendoti di ripeterti all'infinito. Se vuoi rendere le tue query multimediali molto più leggibili e riutilizzabili, non vedo una buona ragione per cui non dovresti usare questo sidekick per combattere i crimini di query sui media.
Basta con l'analogia di Batman. In parole povere, tutta questa funzione è salvare i contesti multimediali (media query / contesto griglia) attraverso variabili e darti l'opportunità di riutilizzarli in tutte le tue media mixins. Questo è un diavolo di un'utile estrazione! Diamo un'occhiata.
Sass:
"css $ tablet: new-breakpoint (min-width 768px max-width 1024px 4)
.elemento-responsive-element + span-columns (3) + media ($ tablet) + span-columns (1)
.elemento-altro-reattivo + span-columns (9) + media ($ tablet) + span-columns (2) "
Super leggibile! Per essere più sicuri siamo sulla stessa pagina: qui fornisci tutte le funzionalità multimediali di cui hai bisogno (ma nessuna virgola, due punti, o, e) più il numero di colonne per il nuovo contesto di griglia, quindi salvarlo su una variabile Sass. Tutto ciò che resta da fare è nutrire il tuo media mescolare con la variabile appropriata, e ASCIUGANO che sono.
Spero che apprezzerete quanto questo testo sia chiaro e quanto sia facile modificare i layout per vari punti di interruzione, il tutto in un unico punto centrale. Sono finiti i giorni in cui la gestione di tonnellate di media query relative al layout potrebbe farti entrare rapidamente in una lotta pugno di fantasia con te stesso.
Mi piacerebbe prendere un po 'di tempo in più per esplorare questo. Se non utilizzi le tabelle molto spesso nei tuoi progetti (come probabilmente non dovresti, dato che abbiamo baciato i giorni in cui usavamo le tabelle per gli addetti al layout), questo può essere difficile da inserire subito.
Hai due opzioni principali per l'utilizzo di questo mix: con l'argomento tavolo o senza qualsiasi argomento.
Sass:
css .some-row-element + row
Quando si usa riga senza il tavolo argomento, a clearfix è aggiunto e $ Display rimane impostato sul valore predefinito, che è bloccare. In effetti, ciò significa che qualsiasi cosa viene dopo l'utilizzo dell'elemento designato riga ha bisogno di iniziare la propria cosa su una "fila" separata.
Sass:
css .some-table-row-element + row (table)
D'altra parte, usando fila (tabella), hai indovinato, rende questa riga parte di un layout di tabella. Quello che succede sotto il cofano, tra le altre cose, è che questo mixin set display: tabella e layout della tabella: fisso.
C'è un'altra opzione con cui puoi fornire questo mix. Puoi passare un argomento ($ direzione con LTR o RTL) che cambia la direzione del layout per quella particolare riga.
Sass:
css .some-row-element + row ($ direction: RTL)
Ma iniziamo dall'inizio. Il seguente esempio fittizio ha 16 .riga contenitore che utilizza il riga mixin. Vediamo cosa succede se si lascia fuori il tavolo discussione.
Haml:
"html .container
.riga% img% img% img% img
% img% img% img% img
% img% img% img% img
% img% img% img% img "
Sass:
"css .container + outer-container background-color: # f5f5f5
.riga + riga
img + span-colonne (1) altezza: 60px margine-fondo: 5px background-color: # e64a19 "
Come puoi vedere, il browser tratta i primi quattro .riga i container non sono legati a una particolare riga e fluttuano semplicemente verso il basso fintanto che hanno spazio disponibile per loro.
Due .riga i contenitori hanno lo stesso trucco, impilati uno sopra l'altro.
Haml:
"html .container
.riga% img% img% img% img
.riga% img% img% img% img
% img% img% img% img
% img% img% img% img "
Non troppo difficile, credo. Anche se non sono sicuro di quanto sarebbe utile, perché istintivamente preferirei usare il omega mixin per una tale occasione. Ciò che sembra abbastanza inutile, tuttavia, sta usando fila (tabella) Qui. Avresti solo una colonna molto lunga che impila tutti i 16 elementi uno sopra l'altro. Ti risparmierò il brutto screenshot ma controlla l'esempio di codepen se sei curioso.
Finora ti ho mostrato i meccanismi di base di questo mixin, specialmente se sei nuovo nel gioco. Ora ci stiamo avvicinando a un territorio utile. Giochiamo con un tavolo reale.
Se non hai ingannato le tabelle prima, ti consiglio di avviare Google prima di procedere. Di seguito una piccola guida di sopravvivenza per coloro che hanno bisogno di aggiornare un paio di termini.
Qui abbiamo un tavolo elemento. Comprende a thead tag, che ha una riga per visualizzare le varie intestazioni di colonna tramite il esimo tag. Sotto troverai il tbody che contiene i dati effettivi per ciascuna riga della tabella (TR) tramite il TD tag.
Haml:
"html .container
%tavolo
% thead% tr% th Nome utente% th User_ID% th Pizza preferita% th Pet% th Nome dell'animale% th Gioco preferito% tbody% tr% td Joe% td 112233% td Pepperoni% td Cat% td Gordon% td Splinter Cell% tr % td Jane% td 223311% td Funghi% td Cane% td Fluffy% td Metal Gear Solido V% tr% td Bob% td 331122% td Cipolle% td Pesce% td Squamoso% td Little Big Planet 2 "
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: darken (# f5f5f5, 50%)
tr + row () text-align: center
th padding: top: 10px bottom: 20px
td height: 50px background: # 81d4fa padding-top: 2px "Ciò si traduce in un blob di tabella non uniforme e sgradevole, che si estende solo fino al contenuto di queste celle di dati della tabella. Ovviamente non super utile e un dolore se si desidera manualmente risolvi questo problema usando un po 'di regole CSS per sistemare le cose.
Ci dovrebbe essere una soluzione semplice a questo diritto? Aggiunta tavolo come argomento e display: tabella e layout della tabella: fisso vieni in soccorso! Per non parlare di un piccolo topping di fill-genitore sotto il cappuccio.
Sass:
css tr + row (table) text-align: center
Nota: Un layout di tabella fisso come questo ha il vantaggio di non solo disporre la tabella più velocemente, ma la larghezza delle colonne non dipende dal contenuto delle celle della tabella. Otterrai righe disposte in modo uniforme su tutta la larghezza del contenitore della tabella. Rimuovere una cella di dati della tabella (TD) e vedrai gli altri elementi dividere equamente lo spazio in quella riga:
Chiudiamo con un esempio che mostra il comportamento predefinito delle tabelle senza usando il riga mixin affatto.
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container background-color: darken (# f5f5f5, 50%)
tr allinea-testo: centro
th padding: top: 10px bottom: 20px
td height: 50px background: # 81d4fa padding-top: 2px "
Come puoi vedere, le celle sono equidistanti ma non usano tutto lo spazio appropriato a loro disposizione. Si orientano al contenuto più lungo per colonna e regolano le loro celle per allinearsi lungo queste linee.
Ci scusiamo per essere eccessivamente prolissi riga ma spero che questa sezione abbia creato un po 'di mal di testa con tabelle e file un po' meno indolore.
Andando avanti, Neat offre una soluzione semplice se vuoi che un elemento riempia rapidamente il suo genitore coprendo lo stesso numero di colonne. Non devi fornire argomenti. Questo mixin non è niente di speciale, ma potrebbe rivelarsi utile quando gestisci query o tabelle multimediali.
Nota: utilizzando Span colonne (12) invece di fill-genitore coprire l'intera larghezza di un contenitore esterno non sarebbe l'approccio giusto, aggiungerebbe semplicemente un bagaglio inutile.
Haml:
html .container% aside A parte 3 colonne | fill-parent% article Articolo 5 colonne | fill-genitore
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container margin-top: 10px background-color: # f5f5f5
a parte, articolo margin-bottom: altezza 5px: 200px
aside + span-columns (3) + fill-parent background-color: # 81d4fa
article + span-columns (5) + fill-parent background-color: # e64a19 "
Ricorda che gli elementi usano fill-genitore ignorare altri elementi nella stessa riga e mirare a coprire l'intera larghezza del genitore senza considerare i loro vicini. Immagino che questo sia abbastanza semplice, andiamo avanti!
Ogni elemento nella tua griglia Neat ha a $ Default-layout di direzione che è impostato su LTR (da sinistra a destra) in impostazioni / _grid.scss. Ciò significa che dietro le quinte Neat usa sempre a direzione contesto con da sinistra a destra.
Sotto il cofano, questo mixin non fa altro che cambiare la direzione di galleggiamento dell'elemento applicato. Che cosa è pulito è quello all'interno di un contesto direzionale, diciamo da sinistra a destra, puoi raccogliere un gruppo di elementi della griglia e cambiarne la direzione da destra a sinistra-tutto in una volta, sotto un blocco di codice. Ancora una volta, questa soluzione rende le cose più compatte e leggibili per te stesso, oltre che più facili da capire per qualcuno che non è così familiare con un determinato progetto.
Haml:
html .container% aside 3 colonne% articolo 9 colonne
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container margin-top: 10px background-color: # f5f5f5
a parte, articolo margin-bottom: altezza 5px: 200px
+direction-context (da destra a sinistra) aside + span-columns (3) background-color: # 81d4fa
article + span-columns (9) background-color: # e64a19 "
Ecco la stessa demo senza direzione contesto:
Ecco un altro esempio. Niente di nuovo per ora, è solo che le colonne sono di uguale dimensione e anche da cui fluire da destra a sinistra.
Haml:
html .container% aside 3 colonne% articolo 3 colonne
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container margin-top: 10px background-color: # f5f5f5
a parte, articolo margin-bottom: altezza 5px: 200px
+direction-context (da destra a sinistra) aside + span-columns (3) background-color: # 81d4fa
article + span-columns (3) background-color: # e64a19 "
Il seguente piccolo ritocco ha solo uno di questi tre elementi di colonna che usano il mixin e quindi galleggiano sui lati opposti del contenitore. Niente di troppo magico, ma potrebbe essere utile avere nel sacco dei trucchi.
Sass:
"Colore corpo css: sfondo bianco-colore: bianco
.container + outer-container margin-top: 10px background-color: # f5f5f5
a parte, articolo margin-bottom: altezza 5px: 200px
aside + span-columns (3) background-color: # 81d4fa
+direction-context (da destra a sinistra) article + span-columns (3) background-color: # e64a19 "
Quest'ultima sezione del tutorial tratta un paio di mixin che volevo menzionare per completezza, ma che personalmente cerco di evitare poiché non mi hanno sempre dato i risultati che mi aspettavo. Se hai una migliore esperienza nell'usarli, per favore fammi sapere. Oltre a questo, tre di loro saranno presto deprecati:
Accentsconagua
reset-Displayreset-Layout-direzioneresetta tuttoNon c'è molto da dire su questo. Immagina di aver cambiato la direzione del layout per qualsiasi motivo e vuoi tornare al $ Default-layout di direzione (da sinistra a destra)? Ecco qua, il contesto predefinito viene ripristinato! Nessun argomento necessario.
Sass:
"css .row + row ($ direction: RTL)
.riga reset-layout-direction "
Quando potrebbe essere utile? Buona domanda! La documentazione dice soprattutto quando è necessario cambiare direzione in una singola riga. Personalmente non mi preoccuperei troppo. Prima di tutto è previsto di essere deprecato in favore di a direzione mixin, e anche mi ha dato un mal di testa sorprendente quando volevo farlo funzionare con le query multimediali.
Per creare un blocco di codice che modifichi le proprietà di visualizzazione utilizzate dai mixin in se stesso, hai due opzioni che puoi passare a questo mixin: bloccare e tavolo. Il primo è ovvio e tavolo aggiunge display: table-cell per te. table-cell forza un elemento a comportarsi come a TD elemento.
Sass:
css + display-context (table) .some-cell + span-columns (2)
Diciamo che hai cambiato il display attivo in tavolo come nell'esempio sopra, reset-Display ti aiuta a tornare facilmente a bloccare. Non ci vuole alcun argomento neanche. La documentazione dice che è più utile se applicato a singole righe che hanno cambiato i loro valori di visualizzazione.
Sass:
"css .row + row (table)
.riga + reset-display "
Se vuoi combinare reset-Display e reset-Layout-direzione in una volta, questo è ciò che otterrai resetta tutto-nessun argomento richiesto. Diciamo che su alcune righe hai cambiato il display in tavolo e il $ Default-layout di direzione a RTL e voglio tornare indietro.
Sass:
"css .row + row (table, RTL)
.row + reset-all "
Bene, quello era lungo. Grazie per averlo superato, e spero che tu abbia trovato un interessante viaggio nel territorio Neat mixino. C'è ancora una cosa da discutere; vale a dire tutte le variabili che hai a disposizione per modificare la struttura per le tue esigenze. Il prossimo tutorial è più breve, ma avvolge la nostra copertura di Neat. Ci vediamo lì!
