CSS  »  Articoli  »  CSS Template e layout 

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:

Altri articoli

Altre guide

Altre newsletter