I framework di layout CSS sono molto utili, ma possono essere un disastro. Devi sempre conformarti al sistema di qualcun altro, indipendentemente dal fatto che abbia senso per te.
Oggi abbandoneremo questa nozione e costruiremo una struttura ultraleggera che può essere implementata ovunque e comunque si desidera ottenere layout multi-colonna complessi in pochi secondi. Costruisci questo Frankenstein Framework mentre procedi, quindi non ci sono zero classi inutilizzate e assolutamente nessun codice gonfiato. Ho già detto che è anche facile da fare per renderlo reattivo? Continua a leggere per vedere il mostro prendere vita.
MENO non meno
Per evitare confusione, dovrei dire in anticipo che useremo MENO, il linguaggio CSS dinamico, che non ha nulla a che fare con il Less Framework, che si chiama male. provando confonderci?). Fortunatamente, il Framework meno è stato ripensato e rinominato in Frameless.
Alla ricerca del sistema di layout perfetto
Come ogni fedele lettore di Shack di design sa, adoro i framework CSS. Non sono particolarmente fedele a nessun framework, né generalmente utilizzo alcuno su progetti reali, semplicemente mi piace scavare per vedere come funzionano. Sono incessantemente affascinato dai modi intelligenti di manipolare il processo di layout basato su CSS.
"Non usi nemmeno metà del codice in un framework, ma lo lasci lì comunque per essere sicuro di non rovinare niente."Negli ultimi due anni ho riflettuto molto su ciò che voglio in un sistema di layout. Le risposte sono abbastanza semplici, ma sono un compito arduo. Per prima cosa, voglio qualcosa che richiede una base di codice molto piccola. Tumuli e tumuli di classi non semantiche e brutte non fanno molto per me. Il layout completamente manuale spesso non è così difficile che posso giustificare l'aggiunta di sistemi di layout gonfiati che nessuno capisce al mix.
Successivamente, voglio qualcosa che sia facilmente personalizzabile mentre lo implemento. Questa è la parte più difficile in quanto i framework CSS in genere non offrono questo tipo di flessibilità. Invece ottieni un grosso file e un gruppo di nomi di classe con cui sei costretto a lavorare. Personalizzare qualsiasi parte potrebbe richiedere ore di ordinamento attraverso il codice per assicurarti che il tuo tweak non rotti nulla. Spesso accade che non usi nemmeno metà del codice in un framework, ma lo lasci lì comunque per essere sicuro di non rovinare niente.
Rolling Your Own Grids
Di recente sono arrivato molto vicino al mio sistema di layout dei sogni nel mio articolo intitolato Rolling Your Own Grid Layout on the Fly Without a Framework. In questo articolo ho delineato un sistema super semplice che utilizza un piccolo bit di codice:
L'utilizzo di percentuali per larghezza e margine ci consente di creare istantaneamente layout a più colonne con zero lanugine. C'è solo un problema con questo metodo: la matematica. Per un determinato layout, è necessario determinare manualmente la percentuale di larghezza della colonna e la percentuale di margine da utilizzare. Per prima cosa devi dividere la larghezza del contenitore per il numero di colonne, quindi devi moltiplicare il margine della singola colonna desiderata per il numero di colonne meno uno, sottrarre quel numero dalla larghezza totale, quindi dividere nuovamente per il numero totale di colonne. In realtà è una matematica molto semplice, ma suona come un incubo quando lo spieghi.
Nell'articolo ho fornito un semplice strumento per consentire di calcolare i valori necessari digitando solo due numeri, ma ho sempre desiderato che questa funzione potesse essere eseguita direttamente nel codice in modo da poter semplicemente incollare in un CSS frammento che calcola la matematica per te. Sfortunatamente, i CSS semplicemente non sono così straordinari. O è?
MENO: CSS con superpoteri
Un'altra cosa per cui sono stato affascinato per un po 'è MENO. Dà davvero i tuoi superpoteri CSS come variabili, mixin, operazioni, ecc. Con la conversione recente in una libreria JavaScript, LESS è più facile che mai da implementare durante un'esecuzione di test (puoi ancora usare LESS.app per compilare il vero CSS prima della pubblicazione).
Con Less Mixet parametrici possiamo costruire un piccolo sistema di layout che può essere modificato per adattarlo alle tue esigenze mentre lo implementa.Ho avuto voglia di inserire un po 'di LESS nel mio sistema di griglia self-service perché sapevo che alla fine avrei reso la mia idea di avere i CSS per eseguire i calcoli per noi possibili. Inoltre, con LESS Parametric Mixins possiamo costruire un piccolo sistema di layout che può essere modificato in base alle tue esigenze mentre lo implementa.
Alla fine mi sono seduto e ho capito tutto e sono abbastanza soddisfatto dei risultati quindi oggi ti mostrerò come costruire il tuo semplice ma estremamente creativo (e anche reattivo) framework di layout.
Attenzione: altamente sperimentale
Il codice con cui lavoreremo è ancora in uno stato molto grezzo e nuovo. Potrebbe non essere perfetto al 100% e certamente non è stato testato abbastanza a fondo da permetterti di scommettere sul tuo stipendio. Questo articolo serve come prova concettuale per un'idea interessante, non come un suggerimento che dovresti improvvisamente iniziare a utilizzare questo sistema nel tuo lavoro quotidiano. Detto questo, è super divertente, quindi sicuramente vorrai provarlo.
Nota che leggere il mio precedente articolo su Rolling Your Own Grids ti aiuterà immensamente a comprendere questo articolo. Inoltre, avrai bisogno di una comprensione fondamentale di LESS poiché non avrò il tempo di insegnarlo qui.
Incontra Frankenstein
Piuttosto che costruire un pezzo alla volta, limitiamoci a dare la caccia e guardiamo il prodotto finito? Ecco il sistema di layout LESS completo che ho ideato. Sembra un mostro, ma non temere, è abbastanza amichevole.
Che diamine?
Chi non ha familiarità con LESS dovrebbe essere abbastanza confuso a questo punto. Sembrano classi, ma hanno in loro un codice davvero strano. Questo perché non sono affatto classi ma MENO Mixet parametrici.
Ho progettato ognuno di questi per funzionare come una funzione. Li implementate in modo molto simile a come implementereste una funzione JavaScript, passando valori personalizzati lungo la strada. Spiegherò brevemente come funziona ciascuno di essi.
setColumnWidth
Come ho detto sopra, c'è un bel po 'di matematica coinvolta nella configurazione manuale dei layout basati su colonne. Questa funzione automatizza questo compito direttamente nel tuo CSS. Si tratta di un pezzo di codice piuttosto impressionante che prende tutto il peso della creazione di colonne equidistanti.
La riga superiore contiene i due valori che puoi passare in set qui con valori di default arbitrari: @columns, che è il numero di colonne che vuoi avere, e @margin, che è la quantità di spaziatura che vuoi tra le colonne. Digitando solo questi due numeri quando si implementa questa funzione si eseguono tutti i tipi di prodezze sorprendenti. Passa automaticamente attraverso una serie di passaggi matematici per calcolare e impostare la larghezza della colonna e il margine della colonna.
L'implementazione di questa funzione ha il seguente aspetto:
Questo imposta il nostro numero di colonne a quattro e il nostro margine di colonna al 4%. Quanto è facile? Se vuoi usarlo di nuovo per creare una riga con 3 colonne e un margine del 5%, gettalo in:
setBigColumnWidth
È bello fingere che tutti i layout abbiano colonne di dimensioni uguali, ma semplicemente non è il caso. Di conseguenza, avremo bisogno di un modo per combinare le colonne. Fondamentalmente, questo fa lo stesso dell'ultima funzione, solo che prende il passo extra di capire la dimensione della colonna espansa e il margine risultante quando due o più colonne sono combinate.
Diciamo che vogliamo un layout a due colonne, ma vogliamo che una delle colonne sia la larghezza di tre colonne singole. Semplicemente impostiamo un layout a quattro colonne, quindi aggiungiamo il valore @combine di 3 in modo che la nostra singola colonna possa occupare lo spazio di tre colonne.
Mettere tutto insieme
Se sei ancora con me, fantastico. Se ti perdi, questo dovrebbe rendere tutto un po 'più chiaro. Impostiamo un codice HTML per vedere come funziona.
HTML per un'installazione a quattro colonne
Per implementare questo sistema, puoi contrassegnare il tuo documento in modo sostanzialmente come faresti normalmente. Ho creato un? Main? div e metti quattro colonne segnaposto all'interno, ognuna con una classe speciale. Dato che questo sistema è super flessibile e funziona come vuoi tu, puoi nominare le tue classi e i tuoi ID tutto ciò che vuoi! Semantic, non-semantic o Ubbi Dubbi, tocca a voi.
La parte importante è che ogni colonna ottiene una classe che puoi scegliere come target e la prima colonna ottiene un? classe in modo da poter cancellare il suo margine sinistro. Questo è un male necessario, potremmo gestirlo senza markup usando uno pseudo-selettore, ma il supporto del browser farebbe schifo quindi questo è probabilmente un modo migliore di andare.
Il CSS per un'installazione a quattro colonne
Prima di tutto, dovremo copiare e incollare la funzione .setColumnWidth e .setBigColumnWidth nel nostro CSS. Questi sono riutilizzabili al 100% e appaiono solo una volta in tutti i nostri CSS (o più esattamente, i nostri meno).
Dopodiché, abbiamo bisogno di impostare alcuni stili di base per il nostro ID principale. Dal momento che voglio illustrare come questo framework può essere reattivo, imposto la larghezza in percentuale, che creerà colonne fluide (usa una larghezza impostata se non vuoi colonne fluide).
Ora arriva la parte magica in cui impostiamo un layout a più colonne così facilmente da farti piangere. Sappiamo che il nostro contenuto ha quattro colonne, io lancio un margine del 4% e questo è tutto il codice che ci serve!
Questo ci darà un layout perfetto, fluido, a quattro colonne e ci sono volute solo poche righe di codice!
Aggiungere un'altra riga
Procediamo e aggiungiamo un'altra riga al nostro layout. Questa volta inseriremo un piè di pagina con due colonne, la prima delle quali sarà una grande colonna della larghezza di tre colonne singole. Ecco l'HTML (si noti che se volessimo utilizzare nomi di classi generici, potremmo riciclare la classe a colonna singola creata in precedenza).
Il CSS
La prima cosa che vogliamo fare nel nostro CSS è impostare gli stili generici per il piè di pagina. Questi sono gli stessi della sezione principale, quindi possiamo semplicemente aggiornare il nostro codice in questo modo:
Allo stesso modo, possiamo semplicemente aggiungere la classe footerColumn al codice per la classe mainColumn (o usare solo un nome generico per entrambi).
Infine, impostiamo la nostra classe per combinare le prime tre colonne.Utilizziamo ancora il layout a quattro colonne e un margine del 4%, ma usiamo un valore di @combine di tre per unire la larghezza delle prime tre colonne.
Con questo, ora abbiamo una seconda fila che siamo stati in grado di personalizzare completamente al volo con quasi nessuno sforzo. Inoltre, non dovevamo scegliere tra quarantasette classi preimpostate, abbiamo appena inventato le nostre!
Rendendolo Responsive
Poiché l'intera griglia che abbiamo impostato è fluida, risponde già abbastanza bene alle diverse dimensioni della finestra. Sfortunatamente, il sistema basato sul margine percentuale inizia a creare colonne abbastanza schiacciate su schermi di piccole dimensioni.
Risolvere questo problema è semplicissimo con una piccola magia di media query. Puoi modificare gli stili come preferisci per adattarli meglio alle diverse dimensioni dello schermo (tutti i nostri LESS funzionano ancora bene). Ecco un rapido esempio che porta semplicemente tutto in un'unica colonna per qualcosa di più piccolo di 700px.
Guardalo in azione
Ora che sai come funziona, è tempo di dare un'occhiata! Si prega di notare ancora una volta che questa è un'idea in corso, quindi se non funziona in qualcosa che non è Webkit o Mozilla, non sono sorpreso.
demo: Clicca qui o sull'immagine qui sotto per il lancio. Assicurati di ridimensionare la pagina e guarda il layout adattarsi alle modifiche.
Perché è lento?
Ho intenzionalmente caricato la versione LESS in modo da poter dare un picco a quello che sta succedendo. Tuttavia, è piuttosto lento in questo modo e in realtà ha solo lo scopo di testare. Eseguendo questo attraverso LESS.app ci fornisce una versione compilata composta da puro vecchio stile CSS e risultati in una pagina molto più scattante.
demo: Clicca qui per vedere la versione CSS compilata.
Conclusione
Probabilmente non sono il primo a tentare di usare LESS per costruire un framework di layout (anche se non ne ho mai visto uno), ma ho cercato di rimanere completamente originale nel mio processo di pensiero qui e ho deciso di costruire qualcosa che rappresentasse un nuovo modo di pensare e utilizzare layout multi-colonna in CSS.
La mia lunga spiegazione rende tutto ciò complicato, ma in realtà è un sistema semplicissimo che richiede solo due brevi mix predefiniti (che ho configurato più funzioni simili) che puoi copiare e incollare direttamente nel tuo codice. Da quel momento in poi crei la tua pagina come preferisci, chiamando un mixin ogni volta che ne hai bisogno e inserendo i tuoi valori.
Lascia un commento e fammi sapere cosa ne pensi del mio Frankenstein Framework. Pensi che semplifichi con successo il processo di layout? Come lo cambieresti?