7+ CSS Grid Frameworks: quale scegliere?
This entry was posted on September 4th, 2009 and is filed under CSS, Web Designing, XHTML.
Il Grid System è ormai diventato nostro fedele compagno nella creazione dei layout web. Ci fa risparmiare tantissimo tempo e funziona egregiamente. Non si ragiona più a numero di colonne bensi a numero di “griglie”. Vediamo in dettaglio cos’è il Grid System per poi elencare i framework più famosi che ci aiutano nella sua realizzazione.
Finchè si ha a che fare con layout semplice, a due o tre colonne, la realizzazione della struttura in CSS non è poi cosi complicata o comunque lunga da effettuare. Quando però si ha a che fare con layout moderni, che tendono sempre più a strutture tipografiche, le cose si complicano non poco. Infatti il concetto di “griglia” è qualcosa di conosciuto per la tipografia tradizionale, tanto è che le impaginazioni avvengono proprio attraverso questo sistema. Ma cos’è una griglia?
L’immagine precedente è la base che si usa per realizzare un template grafico utilizzando il grid system. Come possiamo notare in questo caso sono presenti 12 colonne distanziate equamente tra di loro. Bene queste colonne ci aiuteranno ad allineare i nostri contenitori senza fatica alcuna e con notevole risparmio di tempo.
Vediamo un esempio di applicazione, preso direttamente dal sito di 960gs che presenterò più avanti.
Come si può notare nelle immagini, i contenitori rientrano perfettamente nelle righe e tutto è perfettamente allineato. Comodo vero? Se poi ci aggiungiamo che realizzare un layout del genere è di una facilità estrema usando molti dei framework presenti al momento non vi viene voglia di utilizzarli? 
Scopo di questo articolo sarà proprio quello di esporre gli strumenti che ci sono adesso a disposizione per realizzare un Grid System. Veniamo quindi a presentarli.
960gs (http://960.gs/)
Sicuramente il più famoso e più utilizzato al momento. Deve la sua fama alla facilità estrema di utilizzo. In effetti non necessita nemmeno di una guida per il suo utilizzo, è sufficiente leggere il “poco” codice necessario ad implementarlo per imparare ad utilizzarlo. 960 sta per il numero di pixel di larghezza che utilizza per la realizzazione del layout. Contiene all’interno del pacchetto i template per i più famosi software per la realizzazione di layout (Photoshop, Illustator, ….). Sul sito presenta poi altri due strumenti interessanti; il primo ci consente di realizzare un grid system di dimensioni differenti ai 960px e il secondo è un piccolo script da salvare nei preferiti che fa comparire il grid system all’interno delle pagine a nostra scelta.
YUI: CSS Grid (http://developer.yahoo.com/yui/grids/)
Il tool di casa Yahoo per gestire il grid system. A mio parere un pò complicato da imparare a causa della, sempre secondo me, scelta errata del nome delle classi. A differenza del precedente, YUI CSS Grid consente la gestione di larghezze differenti di layout ma il nome delle classi scelte non ci è di aiuto. Dobbiamo per forza ricorrere, almeno agli inizi, sempre alla documentazione per capire bene come utilizzarle e integrarne i box all’interno. Ci vengono in aiuto però ottimi strumenti presenti nella home page della libreria. A partire dalle cheatsheets complete, ad esempi concreti fino ad un completo tool che ci consente di creare in tempo reale il layout.
Blueprint (http://www.blueprintcss.org/)
Altro framework molto famoso e semplicissimo da usare. Integra al proprio interno anche dei fogli di stile per la gestione delle form e della stampa oltre al reset CSS come gli altri. Anch’esso contiene sulle proprie pagine esempi molto chiari di utilizzo oltre ad un ottimo Wiki e un gruppo di discussione abbastanza frequentato. Sicuramente molto completo e da consigliare. Io personalmente non lo uso per un solo motivo che molti potrebbero definire sciocco. Non mi piace come è strutturato il CSS. Le scelte effettuate per la realizzazione del codice del layout non sono del tutto condivise. L’esempio lampante è il grande utilizzo della proprietà margin con valori negativi. Non sono proprio d’accordo con l’utilizzare valori negativi se non quando strettamente necessario. Questione di “stile”.
Baseline (http://baselinecss.com/)
Framework nuovo, molto giovane. Anch’esso costruito seguento gli standard tipografici. Tra le caratteristiche che lo contraddistinguono è la gestione anche di HTML 5. Anche esso oltre al reset CSS contiene stili per la gestione del testo e delle form. Piccola nota: validando il codice riceverete errori dovuti ad alcune proprietà di gestione di HTML 5, CSS 3 e delle proprietà di personalizzazione del browser (Gecko e Webkit). Piccolo neo la mancanza (forse solo per il momento) di documentazione, son presenti però ottimi esempi per incominciare da subito ad utilizzarlo.
1kbGrid (http://www.1kbgrid.com/)
Framework anch’esso nuovo e soprattutto molto semplice da utilizzare. Framework forse non è la parola adatta per definirlo in quanto non ha un pacchetto standard da scaricare ma ha una facilissima e, a mio parere molto carina, interfaccia grafica iniziale che ci fa personalizzare la griglia a seconda delle nostre esigenze. Le scelte da effettuare riguardano il numero di colonne, la loro larghezza e la dimensione della spaziatura tra le colonne. Avremo come risultato la dimensione del layout e, se è di nostro gradimento, basta scaricare il pacchetto per avere il file css con una pagina di esempio. Sicuramente da lodare la dimensione del file finale, 1kb infatti sta per la dimensione del codice css necessario alla sua implementazione. La sintassi delle classi è simile a quella del 960gs ma è sicuramente un prodotto più povero in contenuti in quanto non contiene alcune classi come il prefix e il suffix necessarie a dare una maggiore spaziature ai box. Prodotto ottimo se si necessita solo del codice per la gestione del grid system.
Tripoli (http://devkick.com/lab/tripoli/)
Framework che fa molta attenzione al codice HTML. Anche esso molto semplice da utilizzare e la sua pagina web, unita agli esempi, ci è di molto aiuto nella compresione. Non ha molte caratteristiche aggiuntive rispetto a quelli presentati finora se non la gestione di attributi HTML ormai obsoleti e non contenuti in X-HTML. Utile anche la predisposizione all’integrazione di plugin. Non molto conosciuto rispetto i precedenti ma sicuramente un buon prodotto.
YAML (http://www.yaml.de/en/)
Yet Another MultiColumn Layout. Ormai è diventato di moda chiamare i prodotti “Yet Another…”. Anche questo framework è da considerarsi un buon prodotto, forse contiene un pò troppi file da includere per realizzare il layout di cui necessitiamo ma ha dalla sua un’ottima documentazione e una serie molto completa di esempi. Consente anche la gestione di colonne fisse e fluide contemporaneamente, caratteristica di pochi. Sul sito inoltre si ha la possibilità di scaricare il pacchetto completo oppure la base per un progetto semplice. Ultima caratteristica, ma non ultima per interesse, è un tool visuale che ci aiuta a realizzare il nostro template usando il suddetto framework; interfaccia semplice e molte opzioni di personalizzazione.
Si potrebbe continuare ancora per molto elencando gli altri framework presenti ma questi sono sicuramente i più famosi e più completi presenti al momento. Se ne ho dimenticato qualcuno importante o peggio ancora non ne conosco qualcuno degno di nota, vi prego di segnalarmelo e provvederò quanto prima ad informarmi. Sicuramente gli altri prodotti non segnalati in queste pagine sono lavori ben fatti ma non hanno caratteristiche che li differenzino di molto da quelli qui elencati. Inoltre sono tantissimi i servizi che consentono la creazione di una griglia online quindi elencarli tutti significherebbe un altro articolo; articolo però che non aggiungerebbe nulla a quanto detto finora.
Prima di chiudere l’articolo però volevo lasciare una serie di risorse sicuramente utili per chi si avvicina da poco al grid system ma non solo. Il primo link è molto importante per chi lavora con layout fluidi. Il seguente framework non è stato incluso tra i precedenti perchè altro non è che la realizzazione del 960gs in formato fluido. Tale framework si chiama fluid960gs ed è disponibile al seguente link: http://www.designinfluences.com/fluid960gs/ . Presenta qualche problemino con IE6 , di rado comunque e spesso son problemi risolvibili facilmente per cui vale sicuramente la pena provarlo.
Altre risorse utili sono i seguenti link:
- The Grid System – Una raccolta di risorse, articoli e molto altro sull’argomento
- Designing With Grid Based Approach – Articolo di Smashing sull’approccio al grid system
Benvenuto! Mi chiamo