Blueprint è l'ultima novità per quanto riguarda i
framework
CSS. Oltre a prendersi cura della tipografia e del rendering
cross-browser dei vostri progetti vi permette anche di costruire dei
robusti layout a griglia.
A differenza di altri prodotti più complessi, come gli
strumenti di YUI, la griglia di Blueprint punta sull'immediatezza e sulla semplicità . Nella specifico, la
progettazione segue i canoni classici di sviluppo, già
ampiamente
approfonditi nell'articolo Web design con le griglie, ed integra al suo
interno anche la gestione del ritmo verticale. Questo ulteriore aspetto
si traduce in un robusto punto di partenza per qualsiasi tipo di
progetto.
Installare il framework
Nel momento in cui scrivo, l'ultima versione disponibile di
Blueprint è
la 0.6 e quindi noi ci atterremo a questa. Rispetto alle versioni
precedenti ci sono sostanziali differenze e migliorie.
Scaricate dunque Blueprint 0.6 dalla sua pagina di Google Code
e
scompattate l'archivio zip.
La cartella che ci interessa è quella chiamata 'blueprint';
all'interno
di 'tests' troverete alcuni esempi di quello che è possibile fare.
Adesso create la vostra pagina HTML e tra i tag <head> e </head> inserite:
<link rel="stylesheet"
href="blueprint/screen.css"
type="text/css" media="screen, projection">
<link rel="stylesheet"
href="blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link
rel="stylesheet" href="blueprint/lib/ie.css" type="text/css"
media="screen, projection"><![endif]-->
Essendo stato progettato per più scopi, Blueprint è uno
strumento che
offre soluzioni pratiche per diversi tipi di problemi. Come si evince
dai richiami qua sopra, è presente, tra le altre cose, sia la gestione
del foglio di stile per la stampa sia quella per la
compatibilità
cross-browser con IE. Ai fini dell'articolo tutte queste
funzionalità
non sono rilevanti, ma sono state comunque installate per motivi
pratici.
Quello che a noi interessa veramente è grids.css, che potete trovare in
'blueprint/lib/'
La griglia
Di default la griglia è larga 950px ed è suddivisa in 24
colonne larghe 30px con 10px di margine tra una e l'altra. La parte di
codice CSS che si occupa di gestire l'intera struttura è la classe
.container che, come suggerisce il nome, va applicata al div che
conterrà tutto il layout:
.container {
width: 950px;
margin: 0 auto;
}
<div class="container"></div>
È possibile modificare a nostro piacimento il numero
di colonne (e
quindi la larghezza) della griglia cambiando il valore width, con
questo calcolo:
nuovowidth = (numero colonne * 40) - 10
Le colonne vere e proprie di quello che sarà il
nostro layout sono
gestite tramite la classe .column insieme ad altre classi di supporto
per controllare posizionamento e dimensione. Non confondete le colonne
della griglia con le colonne reali: le prime sono delle tracce per le
seconde; quando si legge che la griglia di Blueprint è suddivisa in 24
colonne significa che potremmo suddividere il nostro layout al più
in 24 colonne (di larghezza 30px).
La classe .column va applicata ad un div insieme ad una delle
classi
.span-* che determinano la dimensione:
<div class="column
span-24"></div>
In questo esempio abbiamo suddiviso il layout in un unica
sezione larga
24 colonne (.span-24).
La potenza di .column sta nell'estrema flessibilità
della stessa. È infatti possibile nidificare i div cui è applicata. Il rovescio della
medaglia è che siamo costretti a dimensionarli con classi separate come
.span-* e altre che vedremo in seguito.
Prima di proseguire però, apriamo il file screen.css presente in /blueprint ed eliminiamo i commenti dalla seguente linea di codice:
/* See the grid:
Uncomment the line below to see the grid and baseline.
.container { background: url(lib/grid.png); } */
In questo modo verrà impostato per .container uno sfondo che evidenzia le colonne e i loro margini. Molto utile per velocizzare la progettazione della griglia.
Colonne e nidificazione
Il primo passo da fare nella progettazione è quello di
suddividere ogni
livello di annidamento in sezioni verticali, ovvero per righe. Di
solito il primo livello di questo tipo è la classica struttura header /
contenuto / footer, come nel seguente esempio:
<div id="header" class="column
span-24"></div>
<div id="contenuto" class="column
span-24"></div>
<div id="footer" class="column
span-24"></div>
Poniamo adesso di volere, realisticamente, suddividere
#contenuto in
due sezioni distinte: una principale larga 16 colonne e una sidebar
larga 8. Ecco come fare:
<div id="header" class="column
span-24"></div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-16"></div>
<div id="sidebar" class="column
span-8"></div>
</div>
<div id="footer" class="column
span-24"></div>
Molto intuitivo. Tranne per il fatto che non funziona perché
abbiamo un
margine di troppo a destra della sidebar. Questo inconveniente si
manifesta perché .column implementa quel margine di 10px tra le colonne
che per scelta viene adottato da Blueprint per la griglia. Per
risolvere occorre aggiungere all'ultimo elemento di ogni "riga" la
classe .last che si occupa di cancellarlo (esempio):
<div id="header" class="column
span-24"></div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-16"></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
In questo modo si chiude la sezione orizzontale e si può
passare alla
successiva semplicemente aggiungendo dei div.column nel nostro codice HTML.
Una cosa importante da ricordare è che la classe .last non va applicata
a quegli elementi span-24 che occupano per intero la larghezza del
layout (come #header, #contenuto e #footer).
Ma che succede se, ad esempio, la somma totale delle larghezze
di ogni
elemento sulla stessa riga non è uguale a 950px (.span-24)?
Prepend e Append
Succede che il nostro layout non funziona e siamo costretti o
ad
utilizzare per intero tutta la lunghezza di 950px o ad aggiungere spazi
bianchi. Questa seconda possibilità viene implementata
attraverso le
classi .append-* e .prepend-* che si occupano rispettivamente di aggiungere
spazio bianco a destra o a sinistra di un colonna. A livello di codice
tutto questo è realizzato impostando un adeguato valore alla
proprietà
padding e questo è uno dei motivi che ci hanno spinto ad installare
Blueprint al completo per gestire la resa cross-browser.
Proseguiamo a questo punto con il nostro esempio. Aggiungiamo
una
sezione orizzontale #box, la dividiamo in tre zone di uguale dimensione
(.span-8), le prime due delle quali saranno colonne e la terza
sarà solo
uno spazio bianco.
<div id="header" class="column
span-24"></div>
<div id="#box" class="column span-24">
<div class="column
span-8"></div>
<div class="column span-8
append-8 last"></div>
</div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-16"></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
.append-* e .prepend-* sono delle classi utili in svariate
situazioni ed un
uso creativo che potremmo farne è quello di posizionare gli elementi
puramente grafici del nostro layout negli spazi bianchi attarverso
l'uso della proprietà background.
Push e Pull
A volte può presentarsi la necessità di forzare la
disposizione degli
elementi contenuti a loro volta in elementi già correttamente
posizionati nella griglia: il caso più comune è quello delle immagini
all'interno di una zona di testo. Blueprint ha pensato anche a questo e
ci mette a disposizione le classi .push-* e .pull-* che si occupano
rispettivamente di spingere e attirare l'elemento cui sono applicate nella colonna/e adiacente/i.
Chiariamo subito con un esempio:
<div id="header" class="column
span-24"></div>
<div id="#box" class="column span-24">
<div class="column
span-8"></div>
<div class="column span-8
append-8 last"></div>
</div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-16"><p><img
src="i/icona_css.png" class="pull-1">Testo testo testo
testo</p></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
Nella colonna #principale abbiamo messo del testo e un
immagine con
applicata .pull-1 per spostarla nella colonna di sinistra. Potete
scaricarvi la pagina e provare a cambiare la classe applicata per
tastare con mano tutte le possibili soluzioni.
Bordi, Box e regole orizzontali
Uno dei lati negativi in cui ci si imbatte nello sviluppo di un
layout a
griglia, specialmente tramite i framework, è il fenomeno della divite.
Un layout soffre di divite (termine coniato da Jeffrey Zeldman) quando
a causa della sua struttura rigida si è costretti ad annidare elementi
div non necessari, appesantendo inutilmente il markup.
Per schiarirci le idee proviamo a pensare a cosa potrebbe
succedere se,
verosimilmente, volessimo aggiungere un padding o, magari, un bordo ai
nostri elementi .column: il box model farebbe il suo lavoro e tutto il
nostro layout verrebbe stravolto.
La scelta progettuale di Blueprint per affrontare la
situazione è
quello di mettere a disposizione dello sviluppatore due classi -
.border e .colborder - per gestire un bordo di divisione tra le colonne
e una singola classe .box per gestire il padding. Se per
le prime due il problema della divite viene risolto, per quanto
riguarda la terza dobbiamo scendere a compromessi. Ma proseguiamo con
ordine.
Per quanto riguarda i bordi il loro uso è limitato alle
situazioni in
cui vogliamo marcare la divisione delle colonne del nostro layout
tramite un bordo destro. Con .border si aggiunge un semplice bordo
destro di 1px, con .colborder si aggiunge un bordo destro di 1px con
dello spazio bianco aggiuntivo (per una dimensione totale pari ad una
colonna, cioè 30px). Anche in questo caso è più facile capire guardando
un esempio che spiegandolo a parole (esempio):
<div id="header" class="column
span-24"></div>
<div id="#box" class="column span-24">
<div class="column span-8
border"></div>
<div class="column span-8
append-8 last"></div>
</div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-15 colborder"><p><img
src="i/icona_css.png" class="pull-1">Testo testo testo
testo</p></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
Abbiamo aggiunto .border alla prima colonna di #box e
.colborder a
#principale. In quest'ultimo caso prestate attenzione a come siamo
stati costretti a ridurre la dimensione di #principale da .span-16 a
.span-15 a causa dello spazio generato da .colborder.
Passiamo ora ad affrontare il problema del padding. La
soluzione che ci
offre Blueprint è quella di annidare un div con applicata la classe
.box ad una zona del nostro layout, in questo modo (esempio):
<div id="header" class="column
span-24"></div>
<div id="#box" class="column span-24">
<div class="column span-8
border"></div>
<div class="column span-8
append-8 last"></div>
</div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-15 colborder"><div
class="box"><p><img src="i/icona_css.png"
class="pull-1">Testo testo testo
testo</p></div></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
Tramite l'applicazione di .box ad un div interno, si va a
creare un
padding che non va a concorrere nel box model degli elementi strutturali
del layout. In questo modo siamo salvaguardati dal rischio di
visualizzare il nostro lavoro in modo disorganico e disomogeneo su
browser differenti. Il rovescio della medaglia è quello di ottenere, in
caso avessimo molte zone necessitanti di un padding, un risultato
affetto da divite.
Ultimo elemento da descrivere è quello che riguarda le
horizontal rules
<hr>. Ci vengono messe a disposizione due soluzioni per
implementare un <hr> all'interno di una colonna:
- La prima, che non necessita di markup aggiuntivo ed è
autmaticamente
invocata, genera una linea orizzontale di 0.1em di altezza che si
preoccupa di mantenere il ritmo verticale. - La seconda, da invocare tramite la classe
.space, crea
sempre una
linea orizzontale rispettosa del ritmo verticale ma invisibile (di
colore bianco, nello specifico).
Portiamo avanti il nostro esempio:
<div id="header" class="column
span-24"></div>
<div id="#box" class="column span-24">
<div class="column span-8
border"><hr class="space" /></div>
<div class="column span-8
append-8 last"></div>
</div>
<div id="contenuto" class="column span-24">
<div id="principale"
class="column span-15 colborder"><div
class="box"><p><img src="i/icona_css.png"
class="pull-1">Testo testo <hr />testo
testo</p></div></div>
<div id="sidebar" class="column
span-8 last"></div>
</div>
<div id="footer" class="column
span-24"></div>
Note e conclusioni
Giunti alla conclusione è doveroso fare alcune considerazioni
finali.
La prima riguarda la semplicità di Blueprint: il framework è
davvero
immediato e per imparare ad utilizzarlo basta leggere i commenti nei
relativi file. Questa semplicità va a cozzare contro la
principale
critica che viene rivolta a questi strumenti, cioè che, per poterci
lavorare, si è costretti ad imparare metodologie estranee allo sviluppo
canonico con i fogli di stile. In realtà l'unica cosa che
potrete
vedere è solo del codice CSS scritto bene, tutt'altro che diseducativo.
La seconda considerazione riguarda la flessibilità . Ogni
singola classe
incontrata in questo articolo è facilmente modificabile e deve esserlo
secondo le necessità dei vostri progetti. Questo è
particolarmente vero
per le classi che aggiungono dettagli non strutturali come bordi,
linee orizzontali e colori. Non accontentavi di utilizzare gli
strumenti che Blueprint vi mette a disposizione così come sono, ma
sentitevi assolutamente liberi di piegarli alle vostre esigenze.
Detto questo vi lascio come di consueto alcuni link di
approfondimento:
- Blueprint Grid CSS Generator, è un comodissimo tool che vi
permette di creare una griglia delle dimensioni che preferite. - Blueprintcss @ Google Code, la homepage su Google Code di
Blueprint. Potete trovarci le ultime versioni, alcuni esempi e news sul
progetto. - Bjorkoy.com, è il blog personale di Olav Bjorkoy ideatore
di Blueprint. - Blueprint CSS Mailing List, è il gruppo di discussione
ufficiale di Blueprint (in inglese).
Gli esempi sono disponibili per il download.
