Dopo aver scaricato il framework, possiamo passare al secondo step preliminare: creare un template HTML di partenza. Ecco quello che costituisce la base della nostra demo:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" ><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>HTML.it - Guida Foundation - Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fogli di stile CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/demo.css">
<!-- Modernizr -->
<script src="js/vendor/custom.modernizr.js"></script>
<script>
Modernizr.load({
test: Modernizr.mq('only all'),
nope: 'js/vendor/respond.min.js'
});
</script>
</head>
<body>
<!-- Librerie Javascript -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>Analizziamo le parti salienti.
Classi condizionali per Internet Explorer
Foundation adotta, a livello del tag html, l'uso delle classi condizionali per Internet Explorer.
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" ><!--<![endif]-->Si tratta di un sistema divenuto pressoché standard per creare nei CSS selettori rivolti specificamente alle versioni meno recenti del browser di Microsoft. In particolare, Foundation usa come riferimento solo IE8, le versioni precedenti, come vedremo, non sono supportate.
Dunque, dal momento che solo su IE8 viene applicata sul tag html la classe .lt-ie9, per creare una regola CSS ad hoc per quel browser basterà iniziare il selettore con la classe suddetta, così:
.lt-ie9 .row { ...; }Il meta tag viewport
Foundation è concepito per funzionare secondo l'approccio mobile first. È responsivo di default. Ogni progetto dovrà dunque includere il meta tag viewport con questi parametri:
<meta name="viewport" content="width=device-width, initial-scale=1.0">I fogli di stile
Oltre ai fogli di stile foundation.css e normalize.css abbiamo incluso un terzo CSS: demo.css. Non importa come vorrete denominarlo, ma sia chiara la sua funzione: serve innanzitutto a contenere regole CSS aggiuntive rispetto a quelle del framework. Nessuno ci impedisce, per esempio, di usare un menu di navigazione principale fatto in casa piuttosto che la top bar di Foundation. Le regole con cui definiamo questo menu vanno collocate in questo foglio di stile, non in quello principale, che non andrebbe modificato in nessuna delle sue parti!
Oppure serve, il foglio aggiuntivo, a contenere regole che vanno a sovrascrivere i default del framework. Per questa seconda ragione è fondamentale che sia dichiarato dopo foundation.css. Procediamo.
Modernizr
Dopo i CSS inseriamo il riferimento a Modernizr. L'utilità di questa libreria in progetti di questo tipo è enorme. In Foundation viene sfruttata per esempio per poter creare regole CSS adattate ai dispositivi touch. Nel nostro template di partenza la adottiamo anche per un altro motivo. Ecco il codice:
Modernizr.load(
{
test: Modernizr.mq('only all'),
nope: 'js/vendor/respond.min.js'
}
);È un semplice test per verificare il supporto sul browser delle media query. Nel caso in cui il supporto non sia presente, viene caricata la libreria respond.js, che abbiamo provveduto ad aggiungere all'interno della cartella 'js/vendor' del nostro progetto.
A chi serve respond.js? A IE8. Il perché è desumibile da questa tabella:
Foundation, rispetto alla griglia e al layout, non supporta IE7. Per IE8 il problema è che le regole per la griglia sono incluse nelle media query, che non sono supportate da questa versione del browser. La soluzione che abbiamo adottato noi è di estendere il supporto ricorrendo a respond.js.
L'alternativa è di caricare, magari con i commenti condizionali, questo foglio di stile aggiuntivo, da servire solo a IE8.
Librerie Javascript
Prima della chiusura del tag body, vengono caricate le altre librerie Javascript e vengono inizializzati i plugin.
A partire dalla versione 4, Foundation adotta come libreria di appoggio predefinita Zepto e come alternativa jQuery. Poiché Zepto non è supportata da tutti i browser, nella documentazione del framework si suggerisce di usare questo snippet di codice:
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>Molto semplicemente, viene verificata la compatibilità con Zepto, e in alternativa viene caricata jQuery. Nulla impedisce di usare in partenza jQuery, specie se si usano altri script o plugin oltre a quelli predefiniti di Foundation che siano compatibili solo con questa libreria o se si riscontrano problemi di qualsiasi genere con Zepto.
La sezione 'Javascript' della documentazione di Foundation fornisce ulteriori e importanti dettagli tecnici. Ci soffermiamo qui solo su un punto.
Nel nostro template abbiamo caricato il file foundation.min.js, che comprende praticamente tutto il codice Javascript di Foundation, compresi i plugin. È una scelta che potrebbe risultare non ottimale, specie se alla fine si utilizzano, magari, solo due o tre componenti.
Se si vuole è pertanto possibile caricare selettivamente i plugin che ci servono. In questo caso, oltre ai plugin andrà caricata anche la libreria principale di Foundation:
<script src="/js/foundation.js"></script>
<script src="/js/foundation.orbit.js"></script>
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.section.js"></script>A prescindere dalla soluzione adottata, questa parte dedicata alle librerie Javascript va sempre conclusa con il codice per l'inizializzazione dei plugin:
<script>
$(document).foundation();
</script>