In passato abbiamo dato un'occhiata a diversi sistemi di griglia CSS. Abbiamo anche esaminato il modo in cui LESS.js può aggiungere molta flessibilità al modo in cui stili le tue pagine web. Oggi combineremo queste due idee e creeremo un sistema a griglia che utilizzi LESS.
Continua a leggere per vedere perché sulla Terra faremmo una cosa del genere. Se capisci il concetto, puoi anche saltare il tutorial e andare direttamente al download. Iniziamo.
Demo e download
Sentiti libero di scaricare i file e modificarli / usarli come preferisci. Ricordati di compilare il tuo file LESS in un file CSS prima di utilizzare effettivamente il framework su un sito live.
Visualizza esempio
Scarica LESS CSS Grid
Perché MENO?
Molti di voi senza dubbio si chiederanno perché qualcuno dovrebbe combinare un framework CSS con LESS. Qui abbiamo due strumenti separati e ugualmente confusi che metà della società di sviluppo odia o non capisce e decido di andare a racchiuderli insieme per creare un gigantesco pasticcio confuso !? Questo sicuramente intuirà una rivolta.
Tuttavia, nonostante il fatto che molti sviluppatori non userebbero mai uno strumento del genere, un sistema di gridato LESS ha molto senso. Attualmente i sistemi di rete sono piuttosto rigidi. Di solito, scegli tra un paio di download diversi o utilizza un generatore di griglia online per modificare le tue opzioni. Tuttavia, una volta scaricato il download, può essere davvero difficile modificare il funzionamento della griglia.
Poiché LESS ti permette di inserire variabili nel tuo CSS, possiamo usarlo per costruire un framework che sia facilmente personalizzabile durante la fase di sviluppo. L'obiettivo sarà quello di creare qualcosa che permetta larghezze di griglia personalizzate con uno sforzo minimo.
Il sistema di griglia che costruiremo oggi si concentrerà su due variabili viste in ogni altro sistema: larghezza della colonna e larghezza della grondaia. In congiunzione, questi due costituiscono la base per l'aspetto generale della griglia e sono di fatto una fonte primaria di molti argomenti. Se gli sviluppatori non riescono a decidere su quali larghezze dovrebbero avere le colonne e le grondaie, io dico lascialo aperto a ogni sviluppatore per decidere in base al progetto.
A livello pratico, questo significa che è possibile utilizzare lo stesso sistema di griglia per 10 diversi progetti e ottenere 10 risultati molto diversi. Ciò è molto importante per alleviare alcune delle rigide strutture imposte ai vostri progetti da un dato sistema di griglia.
Alla fine dovremmo avere un sistema che permetta allo sviluppatore di scegliere una larghezza di colonna e una larghezza di gronda personalizzate che cambieranno l'intero flusso del layout cambiando solo due numeri nel nostro CSS.
Sono io la prima persona a tentare questo?
In tutta onestà, probabilmente non sono la prima persona a combinare LESS e un framework CSS. Tuttavia, è ancora una grande esperienza di apprendimento che alla fine ti fornirà una conoscenza più approfondita di come funzionano entrambi gli strumenti.
Introduzione: la griglia da 1Kb
Piuttosto che costruire l'intero progetto da zero, ho deciso di trovare un sistema di grid esistente e modificarlo per funzionare con LESS. Questo funzionerà con qualsiasi sistema, ma per semplicità in questo tutorial ho scelto la Griglia CSS 1Kb.
Il motivo per cui ho scelto questo sistema è ovvio: la sua dimensione. 960 GS e Blueprint I CSS sono buoni e dandy, ma sono piuttosto ingombranti e richiederebbero molto più tempo per integrare LESS in. Con 1Kb Grid, possiamo facilmente visualizzare tutti i CSS in un colpo solo e comprendere appieno le modifiche senza troppa spiegazione.
Infatti, ecco l'intero CSS per la griglia di 1Kb a 960px di larghezza con 12 colonne e una larghezza di 20px (10px su ciascun lato).
Questo è tutto ciò che c'è da fare! Adoro la semplicità dei sistemi di griglie più piccole senza tutti i trucchi extra del framework come i ripristini CSS, gli stili di testo e simili. Questo fornisce il punto di partenza perfetto per il nostro esperimento LESS.
Lavorando con MENO
Se hai bisogno di un aggiornamento per LESS.js, dai un'occhiata al nostro recente tutorial. Avrai bisogno di avere una conoscenza di base di LESS e di come lavorarci per procedere, ma per quelli di voi che l'hanno visto almeno in precedenza, spiegherò brevemente cosa è necessario sapere.
Utilizzare. MENO non .CSS
Il file CSS che crei dovrebbe avere un'estensione .LESS al posto del tipico .CSS. Ricordati di collegare correttamente questo file nella parte principale del tuo codice HTML.
Inoltre, dovrai inserire un link al file JavaScript LESS. Per semplificare le cose, copia e incolla le due righe seguenti:
Quando hai finito, vorrai compilare il tuo file .LESS in un file .CSS. Sembra complicato ma in realtà è un processo completamente automatico che utilizza Less.app.
Dichiarazione delle variabili
In MENO, le variabili sono dichiarate usando il? @? simbolo. Proprio come in JavaScript, è possibile eseguire operazioni matematiche sulle variabili in vari modi.
È quindi possibile inserire le variabili ovunque si posiziona normalmente il valore che contiene.
La matematica
Prima di iniziare a modificare la griglia di 1Kb, dobbiamo capire come funziona. Nella nostra versione attuale ci sono 12 colonne, ognuna con una larghezza di 60px e una grondaia di 10px su entrambi i lati sinistro e destro.
È un po 'confuso, ma in qualche modo tutto questo deve sommarsi a un totale di 960px di larghezza. Fortunatamente, c'è uno strumento online fantastico e gratuito che può aiutarci a capire tutta la matematica nitida e grintosa: Instacalc.
Scopri Instacalc
Instacalc è un ottimo calcolatore online che è perfetto per i programmatori, non solo per i risultati dell'aggiornamento istantaneo, ma perché ti permette di usare variabili e vedere facilmente se la tua matematica sta funzionando nel modo che desideri.
Sotto, ho usato Instacalc per tracciare le variabili che ci serviranno nel nostro file LESS iniziando con i numeri standard da 1Kb. Ricorda che vogliamo che l'intero sistema funzioni su due valori in modo che ci voglia solo un secondo per personalizzare.
Anche in questa forma, la matematica potrebbe essere un po 'confusa, ma in realtà è abbastanza semplice. Per prima cosa, impostiamo la larghezza delle nostre colonne su 60 e la larghezza della nostra grondaia su 10. Quindi aggiungiamo semplicemente la larghezza di tutte e dodici le colonne più tutta la larghezza della grondaia (raddoppiamo la larghezza della grondaia perché appare su ciascun lato di ogni colonna). Come puoi vedere, alla fine arriviamo alle 960, indicando che abbiamo fatto tutto bene.
Come puoi vedere nell'immagine qui sotto, ora possiamo cambiare i primi due valori in qualsiasi cosa vogliamo, e il resto si aggiorna automaticamente. Il nostro sistema a larghezza variabile è attivo e funzionante!
Dichiarare le variabili
Ora che abbiamo elaborato le variabili e la matematica in un punto in cui possiamo vederle funzionare, è ora di inserirle nei nostri CSS LESS. Inserisci il seguente frammento nella parte superiore del tuo file LESS.
Come puoi vedere, questo è esattamente ciò che abbiamo fatto con Instacalc. La larghezza della nostra colonna è stata impostata su 60px, la nostra grondaia è 10px (che risulta in una grondaia 20px) e la nostra larghezza totale è uguale alla larghezza delle grondaie più la larghezza delle colonne.
Tutto ciò che dovremo fare ogni volta che vogliamo cambiare il framework è digitare nuovi valori per le prime due variabili. Il resto del framework si aggiornerà automaticamente in base a ciò che faremo dopo.
Creare le classi della griglia
Il prossimo passo è inserire le variabili che abbiamo appena creato nelle classi che compongono la griglia di 1Kb. Ecco il codice originale:
Per modificare questo, inizieremo in modo semplice. La larghezza della classe grid_1 è semplicemente impostata sulla variabile columnWidth. La classe grid_2 è due volte più larga e ora contiene spazio extra per la nuova colonna. Queste quantità semplicemente aumentano man mano che vai più lontano: il moltiplicatore della larghezza della colonna aumenta di uno ogni volta e il moltiplicatore della larghezza della grondaia aumenta di due ogni volta.
Ora, funziona così ma se volessi semplificare ulteriormente le cose potresti usare un Mixin per gestire tutto quel codice confuso. Questo è molto più pulito a mio parere:
Finalizza il CSS
Per completare il CSS, dobbiamo inserire la variabile gutter nella larghezza della colonna e nella sezione della riga nidificata e la variabile totalWidth nella classe della riga. Ricorda che l'intero punto dell'esercizio è sostituire questi numeri statici con variabili che si aggiorneranno automaticamente ogni volta che apportiamo una modifica alla larghezza della colonna e della grondaia.
Questo è tutto! Abbiamo completamente finito di delineare il nostro quadro.
Mettere tutto insieme
Ora che abbiamo spiegato tutti i passaggi, ecco il file LESS finito tutto in un colpo:
Possiamo collegarlo direttamente al documento HTML di esempio fornito con Grid 1Kb per vedere se tutto funziona correttamente.
Anteprima
Se visualizzi l'anteprima nel browser, dovrebbe funzionare perfettamente.
Ora prova a regolare le prime due variabili del codice su qualsiasi cosa desideri e controlla il risultato. Ad esempio, possiamo cambiare la larghezza della colonna in 80 e la grondaia in 50 per ottenere un'area di contenuto più ampia con meno spazi bianchi.
Conclusione
E ce l'hai, un sistema a griglia flessibile che può essere cambiato in qualsiasi larghezza e dimensione della grondaia sostituendo solo due valori. Qui si limita semplicemente a graffiare la superficie del potenziale. Puoi applicare questi stessi principi a qualsiasi e tutti i tuoi framework preferiti.
Lascia un commento qui sotto e facci sapere come cambieresti e migliorerai la griglia LESS CSS. Assicurati inoltre di farci sapere se estendi il concetto e fai qualcosa di interessante!