Foundation è stato sviluppato da Zurb, una società americana attiva nel settore del web design e della consulenza che negli anni si distinta per il rilascio di una serie di interessanti tool per lo sviluppo di siti web. La versione attualmente in uso è la 4. Questa guida è basata sulla release 4.2.3. Oltre che sul sito di Zurb, si può seguire da vicino l'evoluzione del progetto su GitHub.
Cosa offre Foundation
Come tutti i framework di questo tipo il set dell'offerta si può suddividere in due ambiti: CSS e Javascript.
Componenti CSS di Foundation
Oltre alla griglia, un eccellente strumento per la realizzazione di layout responsivi, il framework offre innanzitutto tutta una serie di stili predefiniti per la formattazione degli elementi HTML di base: testo e tipografia, form, bottoni, tabelle.
In generale, tutti gli elementi che compongono il framework sono organizzati e strutturati come componenti CSS.
Si tratta di stili che, associati ai tag HTML tramite specifiche classi, contribuiscono a definire la presentazione degli elementi dell'interfaccia. Possiamo così schematizzare:
Alcuni dei componenti CSS di Foundation sono per esempio rivolti alla realizzazione di menu di navigazione, si tratti della Top Bar o della paginazione, mentre altri sono rivolti ad ambiti più particolari, come la tabelle per i prezzi o le barre di avanzamento.
Qualunque sceglierete di usare nel vostro progetto, non cambia il flusso di implementazione, che è quello visto nell'immagine qui sopra. Se considerate che gli stili sono già definiti, capirete presto che nella sua accezione di base, saper usare Foundation significa imparare una serie di classi da associare a specifiche strutture di codice HTML!
Componenti Javascript
Ricca anche l'offerta di componenti e plugin Javascript:
- Clearing: un clone di Lightbox;
- Dropdown: creazione e gestione di menu a comparsa;
- Interchange: utilizzo di immagini responsive e servite in varie versioni in base al dispositivo;
- Joyride: creazione di tour guidati delle funzionalità del sito o dell'applicazione;
- Magellan: menu di navigazione fissi;
- Orbit: realizzazione di slideshow;
- Reveal: box e popover modali;
- Section: accordion e pannelli a tab;
- Tooltips: beh, per creare.. tooltip!
Tutti i plugin sono compatibili con le librerie Zepto e jQuery. Attenzione però, nella versione 5 del Foundation abbandona il supporto di Zepto, facendo unico riferimento a jQuery.
Integrazione con Sass e Rails
Gli sviluppatori di Foundation hanno pensato a tutti. Il framework è fruibile per un'utenza di base grazie alla distribuzione di una versione CSS, ma offre ad un audience più avanzata l'opportunità di gestire progetti complessi grazie a Sass e all'integrazione con Rails.