Problemi a costruire un layout a griglia? Di per se non è un compito particolarmente complicato, una volta capiti i meccanismi, ma con Blueprint, ottenere subito risultati è semplicissimo.
Non voglio annacquare questa piccola guida con troppi approfondimenti, perciò affrontate la lettura consapevoli che è necessario disporre di alcuni prerequisiti:
- Saper leggere e scrivere un foglio di stile.
- Sapere che cosa è (non sapere come fare) un layout a griglia .
- Sapere cos’è Blueprint.
Tutto qui. Che vi credevate?
Colleghiamo il framework
Per prima cosa bisogna fare ordine ed impostare un piano di lavoro.
Dovete munirvi di Blueprint, e scompattarlo (dove volete). Lavoreremo, per comodità, nella stessa cartella.
Creiamo un nuovo stile.css vuoto e colleghiamolo al framework:
@import url('screen.css');
Volendo si potrebbe lavorare direttamente su screen.css, ma ho preferito così per chiarezza.
Visto che ci interessa lavorare con la griglia, scommentiamo la seguente riga da screen.css:
.container { background: url(lib/img/grid.png); }
Definiamo l’HTML
3 Colonne? 4? Facciamo 5, così le combiniamo un po.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="main"></div>
<div id="primary"></div>
<div id="secondary"></div>
<div id="tertiary"></div>
<div id="quaternary"></div>
<div id="quinary"></div>
<div id="footer" ></div>
</div>
</body>
Abbiamo un #header, un #footer, un corpo centrale #main e cinque colonne (#primary, …, #quinary).
Di solito quando inizio a scrivere un layout la prima cosa che faccio è colorare le sue parti, per vedere la posizione degli elementi. Penso che sia una buona abitudine, perciò ve la ripropongo. Apriamo stile.css e aggiungiamo:
div#header { background: #ccc; }
div#main { background: #123; }
div#primary { background: #456; }
div#secondary { background: #789; }
div#tertiary { background: #FFFF99; }
div#quaternary { background: #AB7766; }
div#quinary { background: #FF67EE; }
div#footer { background: #FAF; }
div#header, div#footer { height: 100px }
div#primary, div#secondary { height: 400px; }
div#main { height: 600px; }
div#tertiary, div#quaternary, div#quinary { height: 200px; }
Ho impostato anche un altezza per alcuni elementi, così da dare un po di spessore senza dover aggiungere del testo.
Meaningful markup
Per capire come costruire la griglia, basta leggere grid.css. È perfettamente commentato e il codice è molto lineare.
La classe .column serve a definire un elemento come colonna, viene usata insieme ai vari .span-x, che impostano la larghezza, ed eventualmente a .first e .last che, togliendo i relativi margini, posizionano correttamente la colonna all’inizio o alla fine. Molto semplice.
Iniziamo a strutturare il layout, per ogni elemento impostiamo prima .column, dopodichè :
- #header, vogliamo che sia largo quanto tutto il container, perciò diamo larghezza massima con .span-14 e, poiché tocca il bordo sinistro e il bordo destro, per togliere i margini applichiamo anche .first e .last.
- #main, il corpo centrale del contenuto, lo facciamo largo span-8 (per lasciare spazio alle altre colonne). Siccome è il primo a sinistra, .first.
- #primary e #secondary, le vogliamo di eguale dimensione e che riempano il container in larghezza (le altre tre colonne le faremo scendere sotto di loro), quindi per entrambe .span-3. Siccome #secondary tocca il bordo destro del container , applichiamo .last. Notate come, sommando la numerazione di .span-X, si ottenga sempre la dimensione massima: in questa griglia la dimensione massima 960px corrisponde a .span-14, e .span-8 più due volte .span-3 fa proprio 14 (8+3+3).
- #tertiary vogliamo che sia larga esattamente quanto #primary più #secondary, e che sia sempre sotto di esse. Per fare questo applichiamo .span-6 e .last. Ci penseranno i margini delle altre colonne a posizionarla sotto le prime due.
- #quaternary e #quinary, si dovranno comportare come #primary e #secondary, ma sotto #tertiary. Perciò .span-3 e .last a #quinary.
- Infine il #footer, identico a #header, .span-14 .first .last.
Ed ecco il codice:
<div id="wrapper" class="container">
<div id="header" class="column span-14 first last">Header</div>
<div id="main" class="column first span-8">Main</div>
<div id="primary" class="column span-3">Primary</div>
<div id="secondary" class="column span-3 last">Secondary</div>
<div id="tertiary" class="column last span-6 last">Tertiary</div>
<div id="quaternary" class="column span-3">Quaternary</div>
<div id="quinary" class="column span-3 last">Quinary</div>
<div id="footer" class="column span-14 first last">Footer</div>
</div>
In realtà io l’ho fatta molto facile, tanto per rendere più chiaro l’uso delle classi di Blueprint. Nella pratica di questo esempio se l’altezza di #main è minore di quella di tutte le altre colonne, queste si sposteranno sotto ad occuparne il posto.
Questo è facilmente evitabile applicando una semplice regola: suddividere il layout in macrocolonne, e suddividere ricorsivamente ogni macrocolonna in microcolonne. Per macrocolonne intendo sezione chiave del layout. In questo esempio avrei dovuto dividere il layout in due grandi parti: #main, per il contenuto, e #sidebar per racchiudere tutte le div da #primary a #quinary, così:
<div id="wrapper" class="container">
<div id="header" class="column span-14 first last">Header</div>
<div id="main" class="column first span-8">Main</div>
<div id="sidebar" class="column span-6 last">
<div id="primary" class="column span-3 first">Primary</div>
<div id="secondary" class="column span-3 last">Secondary</div>
<div id="tertiary" class="column span-6 first last">Tertiary</div>
<div id="quaternary" class="column span-3 first">Quaternary</div>
<div id="quinary" class="column span-3 last">Quinary</div>
</div>
<div id="footer" class="column span-14 first last">Footer</div
</div>
Il principio è sempre lo stesso, bisogna solo prestare attenzione a dove applicare .last e .first, perché si riferiscono sempre all’elemento contenitore (in questo ultimo esempio è #sidebar).
Padding e Bordi
È lecito prevedere l’uso di un padding per disporre altri elementi in modo organico all’interno delle colonne. Ma visto che ogni elemento ha dimensione fissa, questo scombinerebbe il layout.
Esiste per questo problema la classe .box, da applicare in questo modo:
<div id="main" class="column first span-8"><div class="box">Main</div></div>
.box è una div senza dimensione impostata, ma solo padding, da usare affinché il boxmodel non corrompa la struttura. Utilizzate sempre gli elementi .column come semplici contenitori, non aggiungete padding e/o bordi: applicateli invece a div interne con class=”box”, ad esempio:
.decoration { border: 1px #666 solid; background: #ccc; }
<div id="main" class="column first span-8"><div class="box decoration">Main</div></div>
Conclusioni
Ecco qua, abbiamo finito. La guida non è niente di illuminante, ma spero che possa comunque tornare utile per fare chiarezza sul markup di Blueprint.
Se avete dei suggerimenti, o qualche dubbio da risolvere, i commenti sono sempre aperti!
3 commenti
Ottimo tutorial! Una introduzione indolore al ‘framework’ blueprint.
Ne aspettiamo altre!! :D
Beccato :)
Guarda chi c’èèè :)
E te dov’eri finito??
2 trackback
[…] non perdetevi anche questo articolo di Laburno, dove viene implementato passo passo un grid layout utilizzando il framework […]
[…] HTML.it è stata pubblicata un versione aggiornata e migliorata del mio omonimo precedente articolo: Layout a griglia con […]