Odiate i framework di griglia CSS ma amate i vantaggi di layout rapidi che forniscono? Combatti con il codice matematico e il codice necessari per creare al volo i tuoi layout flessibili multi-colonna?
Oggi ti illustreremo come creare il tuo sistema di base e riutilizzabile per creare più colonne che puoi implementare in qualsiasi momento con solo poche righe di codice. Nessun codice gonfiato o nomi di classe non-sematici richiesti!
Grid Framework: pro e contro
Sono un grande fan dei framework di griglia CSS. Adoro scaricarli, aprirli e vedere come funzionano. Ho scritto di quasi tutti i migliori che posso trovare qui su Design Shack e probabilmente continuerò a farlo anche in futuro.
Il vantaggio dei quadri a griglia è un gioco da ragazzi: rendono il layout ridicolo e veloce. Se hai in mente un layout piuttosto semplice per il tuo sito, puoi liberarlo senza sforzo e dedicare più tempo ad arricchire il tuo progetto piuttosto che alle difficoltà nel far funzionare le tue colonne.
Tuttavia, i framework di griglia CSS hanno anche alcuni aspetti negativi molto seri. Per cominciare, molti di loro sono abbastanza pesanti e vanno ben oltre le semplici classi di layout, cercando allo stesso tempo di definire estensivamente ogni elemento HTML predefinito che il mondo abbia mai visto, non importa quanto sia oscuro. Questo problema di dimensioni può sicuramente tendere a rendere le strutture difficili da avvolgere la mente.
Anche i framework Grid sono piuttosto fissi. Devi giocare secondo le loro regole o finisci per rompere l'intera faccenda. Personalizzare il codice a proprio piacimento può essere un processo lungo e doloroso, che sconfigge l'idea che fa risparmiare tempo.
Infine, molti programmatori sono veri stickler per il codice semantico e l'impostazione di classi generiche e con nomi oscuri per il layout li rende davvero frustranti a non finire!
Costruisci il tuo
Come abbiamo appena esposto chiaramente, alcune persone adorano i framework di griglia CSS, molti li odiano in modo assoluto. Questo articolo è rivolto ai programmatori che si trovano in una posizione intermedia tra i due. Ti piacciono i vantaggi che ottieni, come la rapida disposizione di più colonne, ma non sei convinto che queste cose valgano davvero la pena.
Questo è particolarmente vero per chi costruisce una pagina web abbastanza semplice. Certo, sarebbe bello avere un po 'di aiuto con il layout, ma inserire un'intera struttura per una singola pagina è come inserire un escavatore per piantare un alberello.
Per questi tipi di progetti, potrebbe essere meglio abbandonare del tutto gli schemi di griglia. Tuttavia, potrebbe ancora essere necessario disporre di una sorta di sistema in grado di eliminare più colonne al volo.
L'obiettivo qui è quello di impostare un sistema riutilizzabile che è possibile implementare per realizzare complicati layout a più colonne. Il sistema deve essere conciso e non soffrire di codice gonfiato. Non dovrebbe richiedere un enorme elenco di classi non semantiche, molte delle quali non si possono mai usare. Dovrebbe anche essere flessibile e piegarsi alla tua volontà con ogni progetto piuttosto che farti arroccare in un angolo. Se cambi idea e improvvisamente modifichi l'intera larghezza del sito, la nostra griglia dovrebbe ridursi a zero problemi. Infine, l'implementazione dovrebbe essere rapida e indolore.
Creazione di colonne in CSS
Se stai appena iniziando nel layout CSS, la creazione di un layout a più colonne potrebbe essere un po 'intimidatoria. Ovviamente, se fosse semplice, non avremmo tanti quadri che cercano di semplificare il processo!
Supponiamo che tu voglia impostare quattro colonne. Per prima cosa devi tenere in considerazione la tua larghezza. Supponiamo tu abbia un contenitore largo 900px. Se dividi 900 px per quattro colonne ottieni 225 px per colonna. Abbastanza semplice! Tuttavia, queste colonne si schiacceranno tutte l'una contro l'altra, abbiamo bisogno di alcuni margini. Sfortunatamente, i margini interrompono il nostro layout e espandono le nostre colonne oltre la larghezza genitore.
Quello che dobbiamo fare è calcolare la quantità totale di spazio necessario per i margini. Diciamo che vogliamo che la prima, la seconda e la terza colonna abbiano ciascuna margin-right di tre pixel. Tre pixel per tre colonne equivalgono a nove pixel per i margini. Ora prendiamo semplicemente nove dalla nostra larghezza (900 - 9 = 891) e poi dividiamo per quattro colonne per arrivare a 222.75px per ognuna delle quattro colonne.
Eh?
Questo ovviamente ha comportato un po 'di matematica da parte nostra. Non è esattamente roba di livello universitario, ma non è nemmeno divertente farlo ogni volta che abbiamo bisogno di alcune colonne (anche la matematica è piuttosto brutta). Inoltre, non appena cambiamo la larghezza totale del nostro contenitore, questa intera cosa si rompe e dobbiamo ricominciare da capo!
Quindi, come facciamo a fare in modo che quando i genitori cambiano, i bambini seguono?
Usa invece le percentuali
I valori dei pixel sono specifici del caso e troppo precisi per essere utilizzati su qualcosa che vogliamo essere riciclabili. Se sostituiamo le percentuali, la nostra matematica diventa più semplice e la nostra griglia sarà abbastanza intelligente da adattarsi a un contenitore genitore che cambia. Essenzialmente, costruiremo una griglia fluida.
Crea un calcolatore di griglia
Se vogliamo un'implementazione veloce, non possiamo pensare a tutte queste complicate operazioni matematiche ogni volta! Invece di eseguire tutti questi numeri nelle nostre teste, impostiamo uno strumento per fare tutto il lavoro per noi. È piuttosto semplice con uno strumento chiamato Instacalc.
Instacalc è praticamente un calcolatore di fantasia con alcune funzionalità minori del foglio di calcolo. Quello che otteniamo qui è la possibilità di impostare formule riutilizzabili per capire il nostro sistema di colonne. Devi solo fare questo una volta che ti ricordi, una volta che lo abbiamo impostato la prima volta, puoi salvare la calcolatrice e tornare quando ne hai bisogno!
Ecco la configurazione che ho usato. Il primo campo richiede di inserire il numero di colonne e il secondo richiede un valore di margine (questo sarà in percentuale). Il resto è automatizzato per darti i risultati di cui hai bisogno.Il terzo campo calcola il margine totale e il quarto indica la larghezza della colonna di cui hai bisogno.
Se non vuoi configurarlo, non preoccuparti! Usa il mio. Con questo sistema, possiamo facilmente calcolare le larghezze necessarie per il layout a quattro colonne che abbiamo tentato sopra.
Ora, se vogliamo passare a un layout a tre colonne, tutto ciò che dobbiamo fare è digitare? 3? nel primo campo della nostra calcolatrice. Il resto è curato per noi. Tutto ciò risolve il problema di trovare layout a più colonne. Inserisci semplicemente un numero per le tue colonne e un numero per il tuo margine e ottieni tutto ciò di cui hai bisogno. A volte ottieni dei numeri sciatti come risultato, ma sinceramente ho scoperto che non c'è assolutamente alcun problema con l'impostazione delle larghezze delle colonne a? 30.667% ?.
Costruiscilo!
Basta teoria, costruiamo questo ventoso. Tutto il materiale sopra sembra un sacco di lavoro, ma onestamente è molto più lavoro per spiegarlo che per costruirlo!
Diciamo che vogliamo quattro colonne di testo che spiegano quattro funzioni sul nostro sito web. L'HTML per questo è abbastanza semplice, basta creare un wrapper per la sezione nel suo complesso e un div per ogni colonna. Ho anche gettato un? Ultimo? classe sull'ultima colonna per aiutarci a cancellare il margine.
Ora per il CSS. Per prima cosa, impostiamo una larghezza sul wrapper e impostiamo il straripamento a nascosto. Successivamente, modifichiamo semplicemente la classe delle caratteristiche con la matematica che la nostra calcolatrice sputa. È importante notare ancora una volta che, poiché abbiamo già impostato questa calcolatrice, non è necessario eseguire un singolo calcolo nelle nostre teste. Basta digitare i valori e afferrare ciò che la calcolatrice ci dà.
Vedi quanto è piccolo questo codice? Al posto di un quadro gigantesco abbiamo alcune semplici dichiarazioni che chiunque può leggere. Il risultato è un grazioso layout a quattro colonne che si adatta perfettamente a qualsiasi scenario.
Da qui possiamo cambiare la nostra larghezza in tutto ciò che vogliamo e la griglia si aggiusterà da sola. Vuoi passare a 960 px di larghezza? Basta cambiare la larghezza del wrapper.
Se vuoi una bella griglia fluida, modifica la larghezza del wrapper in percentuale. Ora mentre modifichi le dimensioni del browser, le tue colonne si regolano automaticamente.
Combinare colonne
Gli intelligenti tra voi stanno già dicendo? Non così in fretta ?. Il problema che abbiamo riscontrato è che le nostre colonne devono avere la stessa larghezza. Ad esempio, cosa succede se vogliamo combinare le ultime due colonne del nostro layout in un'unica colonna?
Tutto ciò che dobbiamo fare per questo è impostare una formula in Instacalc che combina due colonne e toglie il margine di una di esse. Come il resto, questa è una cosa di una volta che puoi usare ancora e ancora. Qui ho creato una formula per combinare due colonne e una per combinarne tre.
Il codice
L'HTML per questo è esattamente come l'ultima volta, solo che abbiamo tre colonne anziché quattro.
Ancora una volta, inseriamo i numeri dalla nostra calcolatrice e otteniamo un bel pezzo di CSS che realizza esattamente ciò di cui abbiamo bisogno.
Ecco il layout risultante con l'ultima colonna larga due volte rispetto alle prime due. Usando questo metodo puoi tagliare e azzerare una combinazione infinita di diverse larghezze che puoi applicare su tutte le diverse sezioni del tuo sito.
Giocaci
Sicuramente ti incoraggio a saltare in questo codice e sporcarti le mani. Ho creato un campo da gioco dal vivo a JSFiddle per farti vedere questi esempi dal vivo e modificarli a tuo piacimento.
Clicca qui per avviare la demo
Conclusione
Abbiamo avuto una serie di vari obiettivi quando abbiamo iniziato questo progetto. Abbiamo deciso di creare un sistema di base che sia abbastanza flessibile da essere implementato in un contenitore di qualsiasi larghezza, anche se il contenitore cambia dimensione. Il CSS doveva essere estremamente breve e consentire la denominazione di classi semantiche. Infine, l'implementazione doveva essere veloce.
Anche se all'inizio è decisamente complicato, il nostro sistema raggiunge tutti questi obiettivi. Potresti obiettare che c'è troppa matematica per chiamarla facile, ma in verità ti ho dato le formule e la calcolatrice salvata di cui hai bisogno. L'unico lavoro necessario da parte tua è inserire due numeri ogni volta che vuoi creare un nuovo layout!
Questo articolo non è in alcun modo un suggerimento che dovresti sempre usare questo sistema per costruire layout a più colonne. È semplicemente un tentativo di dimostrarti che non devi dipendere dal quadro complicato e gonfio di qualcun altro. Con un po 'di setup e ingegnosità, i layout multi-colonna possono essere realizzati in base alle necessità con pochissimo sforzo!