Layout a griglia con Yahoo Grids

Progettare e creare un layout a griglia non è un
processo complicato una volta che si siano compresi i concetti
di base. Esistono tuttavia svariati tool che ci permettono di velocizzare
il lavoro e ottenere risultati estremamente professionali in poco
tempo e con il minimo sforzo.

Ogni libreria e framework CSS di qualità integra al
suo interno un foglio di stile mastro appositamente dedicato a questo
scopo. Tra tutti, il primo apparso sulla scena lo troviamo
all'interno della YUI, la libreria creata da Yahoo per facilitare lo sviluppo web: si
chiama YUI Grids CSS.

Questo strumento ci offre in soli 4kb un potenziale di oltre
mille combinazioni possibili per i nostri layout.

Installazione

Per poter utilizzare YUI Grids è necessario
scaricare l'intera libreria YUI. Al momento in cui scrivo l'ultima
versione stabile è la 2.3.1 e può essere
scaricata da questo indirizzo:

http://developer.yahoo.com/yui/download/.

Una volta scompattato l'archivio zip, possiamo reperire il file che ci interessa all'interno della cartella /builds/grids. Ne
esistono due varianti:

• grids.css:
  versione standard;
• grids-min.css:
  versione compressa della precedente.

In realtà, per poter lavorare in maniera
indipendente dal
resto della libreria, è necessario ricorrere ad un altro
documento: Fonts CSS.
È il foglio di stile che determina
la tipografia. Il suo utilizzo è consigliato
perché le dimensioni delle griglie sono calcolate in
funzione della misura degli em
che sono definiti proprio da
quest'ultimo foglio di stile.

Ma Yahoo ha pensato a tutto e ci rende le cose facili
fornendo un unico foglio di stile compresso che comprende sia Grids,
sia Fonts, sia un foglio di reset. Si trova in /builds/reset-fonts-grids/
e si chiama reset-fonts-grids.css.
D'ora in avanti useremo quest'ultimo.

Altro prerequisito fondamentale
è l'adozione del
doctype di tipo strict per portare i browser a lavorare in
modalità standard:

Markup di base

Per poter trarre
profitto dal potente markup di YUI Grids è fondamentale
avvolgere il nostro layout in un div contenitore identificato
univocamente dall'id #doc:

Il markup di base ci permette inoltre di suddividere il layout in tre
livelli fondamentali: una testata, un corpo centrale e un
footer, identificati rispettivamente da #hd, #bd e #ft. Questa
suddivisione non è un passaggio obbligato, ma visto che
è la soluzione più implementata nel web design
moderno la adotteremo anche per il nostro esempio:

Larghezza della pagina

L' id #doc assegnato
al div contenitore serve per definire la larghezza della pagina. Ne esistono
quattro varianti standard tra cui poter scegliere e sono:

• #doc: corrispondente a 750px;
• #doc2: corrispondente a 950px;
• #doc3: corrispondente a 100% (ovvero la soluzione liquida);
• #doc4: corrispondente a 975px.

Le dimensioni equivalenti per ogni id, ad eccezione della terza soluzione, sono
valori derivati. La misura reale, come ho già accennato
prima,
è calcolata in
em e questo significa che ogni nostro layout non
sarà né propriamente liquido né propriamente
fisso, bensì fluido.
Per averne un riscontro immediato potete provare a cambiare la
dimensione del testo sul seguente esempio
in cui si utilizza #doc2:

Se le quattro soluzioni proposte non fossero sufficenti siamo
liberissimi di crearne di nuove seguendo il modello di questa
dichiarazione:

Il valore X è la larghezza desiderata misurata in pixel.
Questo valore lo applichiamo alla min-width per evitare sgradevoli
effetti dovuti ad un eccessivo rimpicciolimento del testo (bisogna
ricordarsi che il nostro layout è fluido). Per calcolare
il valore width effettivo, che è in em, si divide X per 13. Il
valore Y ottenuto va moltiplicato a sua volta per 0.9759 per ottenere
il valore di width in em per Internet Explorer. Questo piccolo artificio si
rivela necessario perché, per quanto Fonts CSS si sforzi di
normalizzare la resa cross-browser degli em, Internet Explorer ancora
non riesce a rendere la dimensione esatta.

Tenete presente che i calcoli appena visti sono in funzione
delle
regole tipografiche adottate (in questo caso noi faccciamo riferimento
a quelle predefinite di YUI). Nel caso legittimo in cui vogliate
adottare le vostre regole, i calcoli della #doc personalizzata
cambieranno di conseguenza. In particolare, il valore 13 equivale alla
dimensione del font di base espressa in pixel e andrà
sostituito di conseguenza.

Ricapitolando. Volendo ad esempio ottenere un layout a 600px di
larghezza:

La struttura di base: blocchi e template

La struttura di base è concepita a partire dall'assunto che
ogni tipo di layout sia suddivisibile in due grandi blocchi distinti:
uno principale e uno secondario. Il principale è quello che
andrà a ospitare i contenuti, il secondario
servirà per la navigazione e per le eventuali barre laterali.

Per creare questi due blocchi è sufficiente applicare la
classe .yui-b
(b sta per block)
a due div, e includere il blocco
principale dentro ad un div con id
#yui-main, in
questo modo:

È importante tenere presente che l'uso dei blocchi
non
è obbligatorio. Si rivela però molto utile grazie
alla
capacità di YUI Grids di gestirne la visualizzazione
attraverso
l'uso dei cosidetti template.

Può presentarsi la necessità di avere un
controllo sia sulla dimensione sia sull'ordine di visualizzazione dei
blocchi, nonché
sulla loro dimensione. Ad esempio, per motivi legati all'ottimizzazione per i motori di ricerca, potrebbe essere
necessario spostare il blocco dedicato alla navigazione prima di quello
adibito ai contenuti principali. È possibile controllare
questa caratteristica direttamente via CSS senza dover toccare il
codice della pagina. Per farlo esiste una serie di classi standard,
dette di template e da
applicare al div #doc, che
vanno a spostare e a dimensionare il blocco secondario:

• .yui-t1:
  blocco secondario a sinistra largo 160px;
• .yui-t2:
  blocco secondario a sinistra largo 180px;
• .yui-t3:
  blocco secondario a sinistra largo 300px;
• .yui-t4:
  blocco secondario a destra largo 180px;
• .yui-t5:
  blocco secondario a destra largo 240px;
• .yui-t6:
  blocco secondario a destra largo 300px.

Le dimensioni sono state calcolate in accordo agli standard IAB per i
contenuti pubblicitari.

Ricordiamoci inoltre che le classi .yui-t* sono
concepite per
lavorare solo in presenza di due
blocchi (principale e secondario). Se avessimo bisogno soltanto di un blocco nel nostro layout non
è necessario utilizzare .yui-b,
ma possiamo passare
direttamete all'uso delle griglie (capitolo successivo). Dall'altro
lato, grazie alla capacità di YUI Grids CSS di annidare la
struttura con le griglie, non è mai necessario riccorrere a
più di due blocchi.

Per proseguire con il nostro esempio
applichiamo .yui-t6
così da avere il blocco secondario a destra con larghezza
300px:

Le griglie

Il concetto di griglia è il cuore della YUI Grids CSS. Con
griglia si intende un div cui viene applicata la classe .yui-g (g sta
per grid).
L'idea alla base del meccanismo è che ogni elemento griglia
suddivida il proprio spazio equamente in due parti. Questi due
settori possono essere poi riempiti con altri elementi detti unità
(marcati
con la classe .yui-u)
o nuovamente con delle griglie. La possibilità
di re-includere altre griglie è all'origine dell'enorme
potenziale di questa libreria.

Cosa significa in pratica? Cerchiamo di fare luce con un
esempio. Suddivideremo
il blocco principale in due colonne:

È stata applicata al blocco principale una griglia il cui
spazio è automaticamente diviso in modo equo tra i due
elementi unità che rappresentano la struttura finale del
nostro layout (in questo caso equivalgono a due colonne).

Notate come al primo elemento unità sia stata
assegnata la classe .first
che serve a correggerne il posizionamento. Questo
è dovuto al fatto che non tutti i browser interpretano
correttamente la pseudo classe :first-child
ed è stato pertanto necessario ricorrere ad una classe ad hoc.
È molto importante ricordarsi di applicare la classe .first non solo
alle unità (.yui-u)
ma anche ad eventuali griglie annidate.

La classe standard per definire la griglia, .yui-g, come
abbiamo detto, suddivide sempre il suo spazio in due settori distinti.
Questo significa che, anche includendo nuove griglie, il numero di
unità finali ottenibili sarà
sempre pari.

Per questo motivo esistono varianti della classe che ci
permettono di controllare la suddivisione dello spazio. Nello specifico:

• .yui-gb:
  divide la griglia in tre settori equivalenti (1/3 - 1/3 - 1/3);
• .yui-gc:
  divide la griglia in due settori da 2/3 e 1/3;
• .yui-gd:
  divide la griglia in due settori da 1/3 e 2/3;
• .yui-ge:
  divide la griglia in due settori da 3/4 e 1/4;
• .yui-gf:
  divide la griglia in due settori da 1/4 e 3/4.

Portiamo avanti il nostro esempio.
Dopo aver diviso il blocco
principale in due colonne, dividiamo il blocco secondario in tre
colonne equivalenti:

Quello che abbiamo ottenuto è un solido layout a griglia, di
dimensione fluida, composto da 5 colonne disomogenee, un header e un
footer. È possibile complicare il layout ulteriormente, a
cominciare dall'annidamento delle griglie. Per questo vi
rimando agli esempi del caso che troverete in fondo all'articolo

Ricapitolando

Prima di concludere, ricapitoliamo i passaggi
principali:

• Occorre utilizzare il doctype di tipo strict.
• Il layout deve essere incluso in un div contenitore marcato
  dall' id #doc.
• È possibile suddividire il layout in due blocchi
  principali, uno primario e uno secondario, ed agire sul loro
  posizionamento e sulla loro dimensione tramite le classi .yui-t* da
  applicare al div #doc.
• Ogni zona del layout deve essere coperta da una griglia
  (.yui-g*). Una griglia si occupa di suddividere lo spazio al suo
  interno tra gli elementi figli, elementi che possono essere sia altre
  griglie sia elementi neutri detti unità (.yui-u).
• Per ogni livello di annidamento bisogna aggiungere la
  classe .first al primo elemento, sia che esso sia una griglia sia che
  esso sia un'unità.

Esempi

Oltre a quello che ha accompagnato l'articolo,
vorrei segnalarvi un altro paio di esempi.

Con il primo si vuole fare chiarezza sull'uso delle classi di
template. È stato detto che per usufruire delle classi
.yui-t*
occorre utilizzare due blocchi (principale e secondario).
Questo non significa che i nostri layout debbano necessariamente essere
suddivisi in questo modo. Ad esempio è possibile aggiungere
div sia sopra che sotto senza andare ad intaccare minimamente
la
funzionalità del template. Ecco dunque l'esempio completo.

Il secondo invece riguarda le griglie e il loro annidamento.
Tramite questa tecnica si possono creare dei layout davvero intricati
senza troppo sforzo. Notate come sia importante specificare il primo
elemento per ogni livello di annidamento tramite la classe .first.
 Per evidenziare ogni singola locazione le ho numerate. Per
capirci, la locazione 1.2.1 significa che è nella griglia
primaria (1.), nella seconda griglia annidata (2.), nella prima
locazione (1). È più comprensibile guardare il
codice sorgente che spiegarvelo a parole. Non ho potuto evidenziare
tramite i bordi perché non
si possono usare per il markup
strutturale. In ogni caso, per griglie e unità
ho messo un
outline commentato (basta salvare la pagina ed eliminare i commenti per vedere
le varie suddivisioni). Ecco l'esempio.

Per concludere ho combinato i precedenti due. Al posto del div
sotto l'header del primo esempio ho messo le griglie annidate del
secondo. Difficilmente avrete bisogno di un layout così
complesso, ma vedere fin dove ci si può spingere con le YUI
Grids CSS è sicuramente molto stimolante: esempio finale.

Conclusione

Yahoo classifica i browser per popolarità e
rispetto degli standard e ci assicura che le YUI Grids CSS sono
perfettamente compatibili con gli A-Graded Browsers, cioè i principali
in circolazione: IE6+, Firefox 1.5+, Opera 9+ e Safari. Per avere
un'analisi dettagliata delle compatibilità potete consultare
l'apposita pagina.

Concludo adesso con una serie di risorse utili per
approfondire:

• http://developer.yahoo.com/yui/grids/ 
• http://developer.yahoo.com/yui/fonts/
• Get
  reusable CSS at no cost from Yahoo!
• Intricate
  Fluid Layouts in Three Easy Steps
• How
  to play with Yahoo Grids CSS

Esistono inoltre alcuni strumenti utili per aiutarci nella progettazione dei
nostri layout. Non ci permettono di raggiungere risultati complessi
come quelli degli
esempi finali ma permettono di velocizzare il lavoro durante le fasi
iniziali di progettazione. Il più immediato e funzionale
è YUI
Grids Builder: per utilizzarlo basta impostare i parametri in
un form. L'alternativa si chiama YUI Grids
Wizard,
molto più spartano del precedente. Per utilizzarlo occorre
cliccare sulle parti del layout interessate e modificarne le
caratteristiche nel menu che appare.

Trovate tutti gli esempi visti nell'articolo nel pacchetto zip allegato.