Se cercate una solida base di partenza per la realizzazione di layout a griglia fluidi, Fluid Baseline Grid potrebbe essere lo strumento che fa per voi. Si tratta di un framework leggero e flessibile basato su questi elementi chiave:
- un sistema semplice e intuitivo per la creazione di colonne fluide;
- una base tipografica pensata per implementare un armonico ritmo verticale;
- la capacità, tramite le media queries CSS3, di adattarsi ad una gran varietà di dispositivi e risoluzioni in base ai principi del responsive design.
Vediamo come possiamo usarlo.
Installare il framework e preparare il progetto di base
Per prima cosa scarichiamo dalla pagina ufficiale del progetto il pacchetto zip che contiene tutti i file del framework.
Cosa troviamo nello zip?
- un documento 'index.html' che fa da demo e starting point;
- un foglio di stile 'style.css' commentato che rappresenta il cuore stesso del progetto;
- lo script 'respond.js' con cui allarghiamo il supporto delle media queries CSS3 alle versioni di IE precedenti alla 9;
- documentazione e una serie di icone per il mobile, oltre a un paio di immagini di sfondo.
Il file HTML della demo presenta una struttura molto semplice che analizzeremo nei dettagli tra breve. Per completezza va comunque evidenziato che il file incorpora nella parte finale altri tre script caricandoli da server esterni:
<!-- Minimized jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- HTML5 IE Enabling Script -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- CSS3 Media Queries -->
<script src="js/respond.min.js"></script>
<!-- Optimized Google Analytics. Change UA-XXXXX-X to your site ID -->
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>Nell'ordine abbiamo:
- il link alla versione di jQuery servita attraverso i CDN di Google;
- il richiamo ad HTML5 shiv, lo script con cui possiamo applicare stili agli elementi HTML5 sulle versioni meno recenti di IE;
- il codice per le statistiche di Google Analytics.
Il file 'style.css'
Il foglio di stile 'style.css', come accennavamo, è ampiamente commentato. Una versione con commenti in italiano è disponibile nello zip allegato a questo articolo.
La sua struttura si può suddividere in tre parti.
La prima contiene una serie di regole per la normalizzazione e per la definizione della formattazione di base. Particolarmente importante, come vedremo, è la sezione relativa alle impostazioni tipografiche.
La seconda parte del CSS definisce le impostazioni di default per il layout. FBG segue il principio cosiddetto mobile first, che può essere considerato un'evoluzione del progressive enhancement.
In pratica, il layout di base è pensato per adattarsi al meglio anche ai dispositivi meno capaci (a partire da quelli mobili), mentre con le media queries possiamo fornire versioni ad hoc e 'migliorate' per i dispositivi più capaci e per le risoluzioni di schermo superiori. In termini concreti, ciò si traduce, per fare solo un esempio, in un layout di base linearizzato, senza float, con una sola colonna, con i vari elementi disposti in senso verticale l'uno sull'altro.
Nella terza sezione del foglio di stile troviamo, infine, una serie di media queries. È la parte in cui impostiamo regole e proprietà specifiche per dispositivi e risoluzioni diverse, a partire dagli schermi da 320px degli smartphone con orientamento portrait fino ai monitor ad altissima risoluzione per il desktop. Nello specifico, FBG definisce i seguenti breakpoint attraverso le media queries:
| Breakpoint | Dispositivo |
|---|---|
| 320px | smartphone con orientamento portrait (ritratto) |
| 480px | smartphone con orientamento landscape (paesaggio) |
| 600px | piccoli tablet |
| 768px | tablet tipo iPad in modalità portrait, piccoli netbook, etc |
| 1024px | tablet tipo iPad in modalità landscape, netbook, piccoli laptop, etc |
| 1280px e oltre | computer desktop con monitor ad alta risoluzione |
Bene,fatte queste premesse, possiamo entrare nel vivo.
Come funziona FBG
Partiamo per comodità dalla demo ufficiale (esempio di base). Nell'immagine che segue abbiamo evidenziato con colori diversi le colonne con cui è definita la griglia:
Di base, FBG definisce una griglia a tre colonne. Ciascuna colonna ha una larghezza pari al 31.333% dell'elemento contenitore e presenta un margine pari all'1% sul lato sinistro e su quello destro per separare le colonne stesse. Facendo la somma (tre colonne equivalgono al 94%, sei margini corrispondono al 6%) otteniamo 100%.
Tenendo conto di questa che è la base minima (una colonna larga 31.333%), possiamo strutturare al meglio il nostro layout. La regola fondamentale è questa, semplificando: su ciascuna riga della griglia possiamo avere una combinazione di colonne la cui somma non deve essere superiore a tre.
Se si osserva l'immagine, notiamo come la prima riga abbia una combinazione di 1 + 2; la seconda di 1 + 1 + 1; la terza di 2 + 1; la quarta di 3.
Come si traduce questo concetto in termini di markup? Semplice. Se un elemento deve occupare una sola colonna, gli assegneremo la classe .g1; se ne deve occupare due useremo la classe .g2; nel caso debba occuparne tre la classe sarà .g3.
Verifichiamo sul markup dell'esempio:
<header>
<div class="g1">
<h1>Fluid Baseline Grid</h1>
</div>
<div class="g2">
<h5>The path of […]</h5>
</div>
<div class="g2">
<p>Blessed is he who, in the name […]</p>
</div>
</header>
<div class="cf"></div>
<div id="content">
<div class="g1">
<h3>Is she dead, yes or no?</h3>
<p>Now that there is the Tec-9 […]</p>
</div>
<div class="g1">
<h3>I'm serious as a heart attack</h3>
<p>Do you see any Teletubbies in here? Do you see […]</p>
</div>
<div class="g1">
<h3>Uuummmm, this is a tasty burger!</h3>
<p>Now that we know who you are, I know who I am. I'm not a mistake! […]</p>
</div>
<div class="g2">
<h3>Your bones don't break, mine do</h3>
<p>Well, the way they make shows is, they make one show […]</p>
</div>
<div class="g1">
<h3>I can do that</h3>
<p>My money's in that office, right? If she start giving […]</p>
</div>
<div class="g3">
<h3>Shoot that bitch in the kneecaps</h3>
<p>Normally, both your would be dead […]</p>
</div>
</div>
<footer class="g3 cf">
[...]
</footer>Nel CSS, la disposizione degli elementi sulla griglia è gestita con questa semplice regola:
.g1,.g2,.g3 {display:inline; float: left}Quando la larghezza della finestra del browser è pari o superiore ai 1024px (si veda la media query), le dimensioni di default per le colonne sono invece queste:
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}Ma cosa succede se le dimensioni scendono sotto i 1024px? Provate a restringere la finestra del vostro browser visualizzando l'esempio. Nella media query abbiamo questa regola con la quale, di fatto, passiamo ad un layout a due colonne:
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}Se prima, infatti, con una colonna minima pari al 31.333% potevamo accomodare su un'unica riga fino a tre colonne (31.333 + 31.333% + 31.333% + 6% = 100%), ora non è più possibile (48% + 48% + 48% + 6% = 150%). Di conseguenza, la colonna che non trova posto, la terza, scivola in basso, occupando in quella riga il 48%!
Questi semplici test bastino per fissare un punto: lavorando con strumenti come FBG è cruciale pianificare al meglio il lavoro. Per ciascun breakpoint, è fondamentale sapere come saranno strutturati i contenuti prima di mettere mano al codice. Una fase preparatoria per disegnare i vari bozzetti in Photoshop o altro software di grafica è più che mai utile.
