Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Foundation, introduzione al framework

Link copiato negli appunti

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:

Figura 1 (click per ingrandire) - Rappresentazione schematica di un componente CSS
screenshot

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.

Ti consigliamo anche