CSS  »  Articoli  »  CSS Template e layout 

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.

Figura 1 - Screenshot dell'esempio

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.

Figura 2 - Screenshot dell'esempio 2

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.

Figura 3 - Screenshot dell'esempio numero 3

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.

Altri articoli

Altre guide

Altre newsletter