Se sei come molti sviluppatori, hai fatto il pieno di framework CSS basati sulla griglia. Beh, sei fortunato perché oggi vedremo un nuovo approccio al concetto di un framework CSS.
EZ-CSS cerca di affrontare molte delle cose che odi sui framework basati sulla griglia, pur mantenendo la funzionalità di aiutare nella creazione di layout multi-colonna cross-browser.
Cos'è EZ-CSS?
EZ-CSS è un framework CSS sviluppato da Thierry Koblentz. È simile nel concetto ad altri framework che hai visto come 960.gs o Blueprint CSS, eppure è anche completamente diverso.
La differenza principale tra EZ-CSS e altri framework che hai visto è che qui non sei impegnato in una griglia impostata ma piuttosto hai un ampio grado di libertà sulle larghezze delle tue colonne. In effetti, puoi creare tutte le colonne che vuoi, di qualsiasi larghezza e con qualsiasi dimensione di gronda.
EZ-CSS utilizza anche un layout di modulo unico che consente la prototipazione super rapida. Ne parleremo più tardi, ma essenzialmente ci si basa principalmente sulla copia e incolla di pezzi pre-costruiti di un layout che è possibile combinare e annidare, tuttavia si desidera creare un insieme complesso.
I benefici finali dell'utilizzo di questo framework sono la dimensione e la semplicità. Il file CSS richiesto è solo di circa 1 KB e l'intero sistema è in realtà molto più facile da imparare rispetto ad altri framework che hai visto. La mancanza di restrizioni e hack aggiuntivi come l'inserimento di div per cancellare i float rende più semplice il flusso di lavoro con (teoricamente) meno markup.
EZ.CSS
La prima cosa che devi fare è scaricare il file ez.css gratuito. Per fare questo, vai alla sezione download EZ-CSS e prendi ez-min.css. Ci sono molti altri file opzionali, ma questo è l'unico che è necessario per iniziare.
Buttalo in una directory con un file HTML di base e collegalo con il seguente frammento:
Ovviamente, dovrai personalizzare il percorso per adattarlo alla tua gerarchia di cartelle.
Comprensione dei moduli
Come accennato in precedenza, la funzionalità principale di EZ-CSS ruota intorno a una serie di moduli predefiniti che è sufficiente copiare e incollare nel codice per definire il layout.
Ci sono sette moduli tra cui scegliere nella pagina dei layout del sito: Plain Box, 2A, 2B, 3A, 3B, 4A e 4B. Come puoi vedere nell'immagine qui sotto, ogni modulo contiene 1, 2, 3 o 4 colonne.
Usando questi semplici elementi costitutivi puoi creare tantissimi layout incredibilmente complessi. Lo fai attraverso l'annidamento. Supponiamo quindi di utilizzare il modulo 2A per creare un layout a due colonne e di dividere la colonna più a sinistra in tre sezioni. Devi semplicemente incollare il codice per il modulo 3A all'interno del codice per il modulo 2A e sei a posto!
Anche nella pagina dei layout ci sono diversi layout precostruiti comuni che già combinano i moduli e quindi eseguono gran parte del lavoro per te!
Un esempio
Per avere un'idea di come funziona, creiamo un mockup veloce e sporco usando la struttura EZ-CSS. Fondamentalmente stiamo costruendo uno dei layout pre-fab ma da zero in modo da farti un'idea del processo di creazione del tuo.
Se hai seguito i passaggi precedenti, dovresti avere una directory con un file HTML e il file ez-min.css. Aggiungi a questo un file style.css e collegalo ad esso nel tuo HTML. Quindi, prendi il testo per la? Plain Box? modulo e incollalo nel corpo del tuo CSS.
Importante: Poiché questo sarà il nostro contenitore principale, ho cambiato il? Ez-wr? classe al? ez-mw? classe. Questo centro del passo allinea l'intero layout, a sinistra allinea il testo nel contenitore e impedisce al nuovo layout di cancellare i galleggianti precedenti (a sinistra).
Aggiungere l'intestazione
La prima sezione che vogliamo aggiungere è un'intestazione. Dal momento che questo si estenderà lungo tutta la pagina, abbiamo bisogno di un altro? Plain Box? modulo (questa volta lascia la classe ez-wr). Per inserire questo, lo annidiamo all'interno di? Ez-mw? div, sostituendo la? ez-box? div che era lì. Sembra più complesso di quanto non sia in realtà e risulta nelle poche righe di codice sottostanti.
Notare che ho anche inserito un paio di tag id / class personalizzati in modo da poter applicare questi elementi in base alle nostre preferenze. Non volevo modificare le classi EZ-CSS esistenti perché potrei utilizzarle in modo diverso all'interno di un sito.
Disegnare l'intestazione
Per avere un'idea di come tutto questo si sta verificando, passeremo in avanti e aggiungeremo alcuni stili all'intestazione e al corpo.
Ci sono alcune cose importanti da notare qui. Innanzitutto, i layout EZ-CSS predefiniti sono fluidi. Questo è fantastico per alcuni scopi, ma non volevo un layout fluido, quindi ho semplicemente applicato una larghezza al contenitore per liberarlo. Tutto il resto sono solo alcuni stili veloci e disordinati che ho buttato solo per dare all'intestazione qualche tipo di aspetto. Ripeterò questi stili per il footer, quindi li ho resi una classe invece di un id.
Il risultato è tutt'altro che notevole, ma è un inizio!
Creazione di un layout a 2 colonne
Per aggiungere del contenuto, prendiamo il modulo 2A e lo gettiamo all'interno del wrapper principale dopo l'intestazione. Inseriremo alcune immagini fittizie nella colonna di sinistra e il testo nella colonna di destra.
Non c'è ancora carenza di div (nove per essere esatti), ma è meglio di quello che era. Apparentemente i contenitori ez-box sono principalmente lì per lo styling opzionale. Abbiamo scelto un percorso diverso per il nostro stile, quindi non è stato necessario includerli. Questo aggiunge un po 'di lavoro in più all'azione copia e incolla, ma in realtà non molto. Basta essere cauti su quali div si taglia e guardare attentamente come influenzano il layout.
Conclusione
Qualche giorno fa non avevo mai sentito parlare di EZ-CSS, quindi sto ancora cercando di capire e decidere se mi piace. Mi piace il fatto che si tratti di una nuova versione di un framework CSS che non è la stessa struttura basata sulla griglia che abbiamo visto in cinquanta modi diversi che alla fine sono gli stessi a livello concettuale.
Mentre continuo a giocare con EZ-CSS per vedere cosa è e non è possibile, mi piacerebbe sentire i tuoi pensieri. Hai dimostrato più e più volte di essere più perspicace di me stesso nell'analizzare l'utilità di questi strumenti nel mondo reale, quindi ti sto restituendo questo. Ecco alcune domande per gli avviatori di conversazione:
1. EZ-CSS risolve i problemi che hai con 960 e altri framework grid?
2. Ci sono pro e contro che mi sono perso?
3. Quali sono alcune restrizioni a questo sistema?
4. EZ-CSS è qualcosa che possiamo usare nel mondo reale o solo per la prototipazione?
Inserisci i tuoi due centesimi su questi e altri argomenti correlati che ti vengono in mente!