Share
In questo tutorial costruiremo un sistema di griglia semplice e reattivo usando i CSS. Una volta che abbiamo familiarità con il suo funzionamento, lo miglioreremo con Sass, imparando alcune caratteristiche di base di Sass lungo la strada.
Esaminiamo rapidamente come sarà il nostro sistema di grid. Ci sono modi più intelligenti di costruire griglie, quelle che sono meno invadenti nel markup necessario, ma questa griglia ci offre una grande opportunità per praticare semplici ma utili tecniche Sass. Usa un elemento wrapping, quindi altri elementi all'interno di quello che agisce da righe, quindi più elementi all'interno di quelli che agiscono come le nostre colonne.
Un po 'divertente, ma ti viene l'idea ... Per cominciare, tutto ciò di cui abbiamo bisogno è un file CSS, quindi apri un nuovo documento nel tuo editor di codice e chiamalo "grid.css".
La prima cosa che aggiungeremo è una regola di ridimensionamento globale e di ridimensionamento della casella. Ciò assicurerà che il riempimento applicato ai nostri elementi sia aggiunto entro le loro dimensioni calcolate ci danno molta più libertà per definire le larghezze delle colonne.
*, *: after, *: before margin: 0; padding: 0; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box;
Successivamente aggiungeremo una regola per assicurarci che le immagini utilizzate si comportino in modo fluido.
img larghezza: auto; larghezza massima: 100%; altezza: auto! importante;
Ora alcune regole per assicurarsi che il nostro elemento wrapper si comporti da solo.
.wrapper width: 100%; margine: 0 auto;
Nota: Ricorda che stiamo lavorando prima su mobile. Il nostro contenitore inizia al 100% di larghezza di visualizzazione, ma lo modificheremo per schermi più grandi.
Tutti i nostri elementi di riga contengono le colonne, assicurandosi che i gruppi di colonne si cancellino correttamente. Aggiungiamo un po 'di generale .clearfix regole per il nostro wrapper e gli elementi di riga.
.wrapper: after, .row: after content: ""; display: tabella; chiaro: entrambi;
Nota: Non dobbiamo nominare questi elementi .involucro, .riga e .colonna, possiamo essere molto più creativi di così. Questi nomi sono solo molto chiari per gli scopi di questo tutorial.
Avremo una serie di classi di colonne, a seconda delle dimensioni di ciascuno (ad esempio .colonna 1 e .Colonna-6. Usiamo un selettore di attributi per mirare e disegnare tutti questi in un colpo solo.
[class * = 'column-'] float: left; imbottitura: 1em; larghezza: 100%; altezza minima: 1px;
Questo selettore dice; prendi qualsiasi elemento la cui classe contiene la stringa colonna- e applicare i seguenti stili. Pertanto tutti gli elementi della nostra colonna galleggeranno a sinistra, avranno una imbottitura di 1em (questo forma la nostra grondaia e un po 'di spazio verticale) e riempirà il 100% della larghezza della finestra (di nuovo, qui stiamo lavorando su mobile). Infine, il altezza minima: 1px si assicura che la colonna sia visualizzata correttamente, anche se non ha contenuto.
Che ci crediate o no, ora abbiamo una griglia! Il seguente markup è tutto ciò di cui abbiamo bisogno.
Possiamo utilizzare qualsiasi combinazione di colonne all'interno di righe, dare un'occhiata alla demo per vedere cosa dovresti avere al momento.
Questa schermata mostra molte più colonne rispetto allo snippet qui sopra Questa è la nostra vista mobile, ora aggiungiamo una query multimediale per darci un layout diverso per gli schermi più grandi. Dovrai determinare i breakpoint per la tua griglia, ma useremo un punto di interruzione arbitrario di 30em.
@media solo schermo e (min-larghezza: 30em)
Tutti gli stili che inseriamo in questa query multimediale avranno effetto sugli schermi di 30em e più ampi. Useremo questo punto per suddividere le nostre colonne in larghezze corrette.
Quanto dovrebbe essere larga ogni colonna? Questo dipende da quante colonne abbiamo. Per questa dimostrazione sto lavorando con dodici colonne, quindi ognuna dovrebbe essere esattamente una dodicesima (1/12) del wrapper. Per una colonna che si estende su due larghezze, lo sarà due dodicesimi, e così via. Ecco cosa ci offre:
@media solo schermo e (larghezza minima: 30em) . wrapper larghezza: 95%; larghezza massima: 65em; .column-1 width: 8.33333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 width: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 width: 75%; .column-10 width: 83.33333%; .column-11 width: 91.66667%; .column-12 width: 100%;
Vedrai anche che abbiamo creato il .involucro elemento inferiore alla larghezza totale dello schermo e dato a larghezza massima. Dai un'occhiata a cosa è successo alla nostra rete.
Probabilmente vorrai scegliere il padding più appropriato nella tua griglia La nostra griglia CSS funziona, ma cosa succederebbe se volessimo effettivamente sedici colonne nella nostra griglia? O ancora di più? Dovremmo ricalcolare ogni colonna e inserirla manualmente nel nostro file CSS ogni volta. Per non parlare del fatto che il nostro CSS diventerebbe sempre più lungo e più difficile da gestire. Fortunatamente, Sass (o qualsiasi altro preprocessore) può aiutarci.
Questo tutorial non riguarda la configurazione di Sass, ma si presuppone che tu sappia già come farlo. Se questo non è il tuo caso e devi metterti subito in moto, dai un'occhiata a Mastering Sass: Lezione 1, o SASS e Compass per i web designer: Introduzione.
Una volta che hai configurato un progetto Sass, tuffati nel passaggio successivo.
Sass ci aiuterà a ripulire il nostro CSS in tutti i modi, ma la prima cosa che possiamo fare è estrarre qualsiasi valore utile e memorizzarlo in variabili. Inizia iniziando da un nuovo parziale chiamato "_variables.scss"; un file Sass che non sarà compilato direttamente in CSS, ma faremo riferimento nei nostri altri file.
// grid variables $ grid-columns: 12; $ grid-max-width: 65em; // breakpoint $ breakpoint-small: "solo schermo e (min-larghezza: 20em)"; $ breakpoint-medium: "solo schermo e (min-larghezza: 30em)";
Queste variabili ci danno la quantità di colonne con cui vogliamo lavorare; 12 al momento, ma potrebbe essere facilmente modificato a 16, forse 32 (qualunque cosa tu voglia veramente). Abbiamo anche memorizzato alcuni punti di interruzione nelle variabili come stringhe, anche se ne stiamo usando solo una al momento.
Li useremo a breve, ma prima installeremo alcuni mix.
I mixin di Sass sono pezzi di codice che possiamo definire una volta e poi riutilizzare altrove nel nostro progetto. Ad esempio, potremmo prendere il primo set di regole in cui impostiamo border-box e ne estrai la maggior parte in un mixin. Iniziamo con:
*, *: after, *: before margin: 0; padding: 0; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box;
Poi ne estraiamo una parte che possiamo riutilizzare, definendo un mixin che ho chiamato "border-box" in questo modo:
@mixin border-box -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box;
Quindi, noi @importare le nostre variabili e mixin nel principale "grid.scss", usando il mixin con un @includere dichiarazione.
@import "variabili"; @import "mixins"; *, *: after, *: before margin: 0; padding: 0; @include border-box;
Possiamo fare una cosa simile con le regole di clearfix, come suggerito da Sebastian Ekström. In questo caso prendiamo le regole di clearfix raccomandate da Nicolas Gallagher e le aggiungiamo al nostro file mixin con a selettore segnaposto (%):
% clearfix * zoom: 1; &: before, &: after content: ""; display: tabella; &: after clear: both;
Il selettore di segnaposto ci consente di definire interi blocchi di stile che vengono visualizzati solo quando li estendiamo altrove, in questo modo:
.wrapper, .row @extend% clearfix;
Una volta compilato, le poche righe di Sass sembrano così:
.wrapper, .row * zoom: 1; .wrapper: before, .row: before, .wrapper: after, .row: after content: ""; display: tabella; . wrapper: after, .row: after clear: both;
Facciamo uso di alcune di quelle variabili che abbiamo creato, vero? Per cominciare possiamo scambiare il larghezza massima valore sul wrapper. Questo:
.wrapper width: 95%; larghezza massima: 65em;
diventa questo:
.wrapper width: 95%; larghezza massima: $ grid-max-width;
Ora facciamo lo stesso con la nostra query sui media. Questo:
@media solo schermo e (min-larghezza: 30em)
sarà migliorato con il nostro $ Breakpoint-media variabile:
@media # $ breakpoint-medium
Nota: vedrai che abbiamo avvolto la nostra variabile in # . Questo è indicato come interpolazione. Normalmente questo viene fatto se abbiamo bisogno di generare una variabile all'interno di un'altra, ma è necessario in questo caso perché il compilatore Sass esegue il trip sulle media query se @media non è direttamente seguito da parentesi graffe (). Puoi leggere di più su questo in Hugo Giraudel. Tutto ciò che devi sapere su Sass Interpolation.
Per usare la nostra variabile finale, $ grid-colonne, abbiamo bisogno di utilizzare altre funzionalità di Sass; loop.
Le nostre definizioni di larghezza delle colonne sono tutte esattamente uguali, a parte i valori effettivi. Sarà molto più pulito se emettiamo una definizione di colonna per tutte le colonne di cui abbiamo bisogno, cambiando i valori ogni volta. Per fare questo possiamo usare un Sass @per loop, che assomiglia a questo:
@for $ i da 1 a 12 // contenuto in loop
Questo eseguirà un ciclo di 12 iterazioni e ogni volta il valore di $ i rifletterà quel ciclo. Possiamo produrre $ i come questo:
@for $ i da 1 a 12 .column - # $ i
Di nuovo, noterai che stiamo usando # in giro $ i per emettere il valore come una stringa che stiamo accodando al .colonna- selettore. Questo ci dà il seguente quando compilato:
.column-1 .column-2 .column-3 .column-4 .column-5 .column-6 .column-7 .column-8 .colonna- 9 .column-10 .column-11 .column-12
Brillante! Ora usiamo alcuni calcoli per produrre gli stili corretti all'interno di questi selettori.
Stiamo andando bene, ma ora dobbiamo produrre qualcosa di simile a quanto segue per ciascun selettore:
.colonna-5 larghezza: 41,66667%;
Quella larghezza della colonna è calcolata come 100% divisa per il numero totale di colonne, moltiplicato per il numero della colonna. In questo caso 100% / 12 * 5 = 41,66667%. Questo è quindi il calcolo che dobbiamo applicare, eliminando i valori rilevanti per le variabili.
@for $ i da 1 a 12 .column - # $ i larghezza: 100% / 12 * $ i;
Sass ora sta eseguendo i calcoli per noi, dandoci il seguente:
.colonna-1 larghezza: 8,33333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 width: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 width: 75%; .column-10 width: 83.33333%; .column-11 width: 91.66667%; .column-12 width: 100%;
Come ultimo pezzo di riordino, possiamo usare il $ grid-colonne variabile, invece del valore 12:
@for $ i da 1 a $ grid-columns .column - # $ i width: 100% / $ grid-columns * $ i;
Ora, se vogliamo cambiare il numero di colonne, cambiamo semplicemente la variabile e tutti i calcoli saranno fatti per noi! Ad esempio, cambiando $ grid-colonne a 4 dacci il seguente CSS:
@media solo schermo e (larghezza minima: 30em) . wrapper larghezza: 95%; larghezza massima: 65em; .column-1 width: 25%; .column-2 width: 50%; .column-3 width: 75%; .column-4 width: 100%;
Il nostro grid.scss finale è una misera 42 righe di codice; molto meno del nostro CSS iniziale.
@import "variabili"; @import "mixins"; *, *: after, *: before margin: 0; padding: 0; @include border-box; img larghezza: auto; larghezza massima: 100%; altezza: auto! importante; .wrapper width: 100%; margine: 0 auto; .wrapper, .row @extend% clearfix; [class * = 'column-'] float: left; imbottitura: 1em; larghezza: 100%; altezza minima: 1px; @media # $ breakpoint-medium .wrapper width: 95%; larghezza massima: $ grid-max-width; @for $ i da 1 a $ grid-columns .column - # $ i width: 100% / $ grid-columns * $ i;
Durante questo processo abbiamo esaminato le variabili Sass, i mixin, i segnaposti, le estensioni, i loop, gli operatori e persino l'interpolazione. Si tratta di un insieme incredibilmente potente di funzioni e di un ottimo inizio se stai semplicemente entrando in Sass.
In quale altro modo potresti migliorare la griglia che abbiamo costruito? Cos'altro vorresti aggiungere o rimuovere? Fateci sapere nei commenti!
Accentsconagua