Introduzione a 960gs

Dopo l’hype e il buzz suscitati dall’entrata in scena di framework CSS celebri come Blueprint CSS e YUI Grids, attualmente il panorama è dominato da un nuovo protagonista: 960 Grid System, per gli amici 960gs.

960gs prende ispirazione dai suoi predecessori e focalizza i suoi obiettivi sulla semplicità e lo sviluppo rapido di prototipi e layout. Le sue qualità sono state ben accolte dalla comunità dei designer e moltissimi nomi famosi ricorrono a questo valido strumento per confezionare layout a griglia eccellenti in tempi brevi. Per citare qualche nome, vi basti sapere che 960gs è il framework di riferimento per lo staff di WooThemes.

Contenuto e installazione

Per prima cosa dirigiamoci sulla home ufficiale e scarichiamo il pacchetto di 180k (in alternativa potete prendere il necessario dal repository ufficiale su GitHub).

Create una cartella in cui sviluppare un layout di prova e scompattate dentro il pacchetto con il framework. Quello che otterrete sarà questo:

• code – è la cartella principale che contiene il framework, a sua volta suddivisa in:
• css – dove sono contenuti i fogli di stile
• img – cartella di appoggio per le immagini
• licenses – questa cartella contiene i file della licenza, che è la GPL/MIT
• sketch_scheets – all’interno di questa cartella si trova un PDF da stampare le cui pagine sono suddivise in colonne per permettere al designer di fare delle bozze a mano del layout da realizzare.
• templates – in questa cartella si trovano dei template per costruire dei mockup (bozze digitali) con i programmi più utilizzati: Fireworks, Photoshop, Omnigraffle, Visio.

Lo sviluppo vero e proprio del layout dovrà essere fatto all’interno della cartella code, visto che contiene gli unici file indispensabili si trovano dentro le cartelle css e img.

Per cominciare creiamo una nuova pagina in XHTML 1.0 (va bene anche HTML 4):

Per installare il framework basta incollare queste tre righe nell’head della pagina:

La prima richiama il foglio di reset (che è basato sul reset di Eric Meyer), la seconda si occupa della tipografia, la terza e più importante riguarda la griglia e il suo sviluppo.

Una delle qualità dei vari framework CSS è la semplicità: i fogli di stile non sono complicati, quindi per imparare ad usare un framework, in generale, non abbiamo bisogno che aprire il file che ci interessa e leggerlo. Niente di più. Andiamo quindi ad aprire 960.css e diamo uno sguardo a quello che ci offre (vi consiglio la versione non compressa, dentro alla cartella uncompressed).

Di griglie e contenitori

Il primo passo verso la costruzione di un layout, specialmente a griglia, è quello di disporre un div contenitore, ed è sopratutto a questo punto che 960gs mostra la sua flessibilità.

È possibile, infatti, marcare il div contenitore con due classi distinte:

• .container_12
• .container_16

Come si potrà intuire dal nome, a seconda di quale decideremo di scegliere, la griglia del nostro layout si estenderà o su 12 colonne o su 16. Che cosa significa questo? Significa che a parità di larghezza (cioè i canonici 960px) possiamo suddividere il nostro layout in al più 12 o 16 colonne.

Se vi sfugge il concetto di colonna forse vi conviene ripassare le basi dei layout a griglia; in generale vi basti comunque sapere che una griglia è suddivisa in un certo numero di colonne distanziate tra loro, e che la larghezza di una colonna rappresenta la larghezza minima che un elemento può assumere all’interno del layout. Per avere un idea ancora migliore di come 960gs sia strutturato, basta dare un’occhiata alla pagina di esempio.

Se decidiamo di dividere il nostro layout su 12 colonne:

Dopodiché non dovremo fare altro che decidere come suddividere il nostro layout; possiamo ad esempio progettare il classico layout a due colonne con una sidebar laterale:

Il markup è molto semplice, e si ricorre a poche classi chiave:

• .grid_X indica la larghezza in colonne di una data div. Nel caso dell’header .grid_12 significa che dovrà essere largo 12 colonne (cioè la larghezza massima in accordo al contenitore scelto);
• .alpha serve per indicare nel caso di div adiacenti, quale sia la prima della fila;
• .omega come sopra indica l’ultima div sulla stessa riga.

Il layout ce lo possiamo immaginare su tre righe orizzontali larghe quanto il contenitore suddivise da un div vuoto marcato con .clear: la prima e l’ultima comprendono un unico div largo quanto tutta la griglia, la seconda invece contiene due div.

Quando si inseriscono div adiacenti, come in quest’ultimo caso, dobbiamo fare attenzione che la larghezza in colonne complessiva sia uguale alla larghezza in colonne del contenitore: in questo caso per calcolarla basta guardare il nome delle classi, infatti .grid_8 e .grid_4 = .grid_12.

Si possono mettere tanti div sulla stessa riga quante sono le colonne del contenitore, l’importante è marcare la prima e l’ultima con le classi .alpha e .omega.

Il div vuoto marcato con .clear serve a prevenire distorsioni dovute ad elementi flottanti. In realtà per layout semplici è un accorgimento ridondante e spesso potrete ometterla, ma in caso di layout complessi contenenti elementi extra-griglia a loro volta flottanti (testo e immagini posizionati in modo particolare) diventa un compromesso necessario.

Spazi vuoti

Anche 960gs, come altri framework, permette di progettare layout con “spazi vuoti”. Riprendendo l’esempio di prima, se avessimo voluto che il #main rimanesse largo 8 colonne sulla sinistra, ma senza nessuna sidebar da 4 sulla destra, avremmo dovuto semplicemente modificare il codice in questo modo:

Esistono due classi per la creazione di spazi bianchi:

• .suffix_X aggiunge un padding di X colonne a destra;
• .prefix_X aggiunge un padding di X colonne a sinistra.

Si noti che abbiamo dovuto comunque aggiungere .alpha e .omega, perché anche utilizzando prefix e suffix su un unico elemento, 960gs considera lo spazio bianco come un elemento a parte (leggendo il codice del framework è chiaro come i margini tra le colonne siano di default per tutte le griglie tranne per quelle larghe quanto il contenitore).

Conclusioni

Come abbiamo appena visto gli elementi che il framework ci mette a disposizione per sviluppare un layout a griglia sono davvero pochi e molto semplici da usare, ma permettono di sviluppare rapidamenti risultati davvero complessi.

Grazie a questa sua immediatezza 960gs ha avuto un grande impatto sulla comunità degli sviluppatori, e in rete si possono trovare molte risorse per approfondire e anche dei comodi tool da usare per velocizzare ancora di più lo sviluppo di un layout.

Tra le più interessanti vi segnalo:

• Tutorial:
  • Design a Web Template using 960gs
  • Prototyping with 960gs
  • A Detailed Loot at 960gs
• Tools:
  • Grid System Generator: è un tool che vi permette di descrivere una nuova griglia secondo dimensioni personalizzate (larghezza totale, larghezza colonne), il codice generato è basato su 960gs
  • Fluid 960gs: è il framework 960gs ripensato per sviluppare griglie dinamiche e a dimensioni fluide grazie all’utilizzo delle Mootools