ZURB Foundation: User Interface framework CSS per un front end responsive

Nel 2010 l’agenzia di design ZURB ha creato un framework CSS con l’obiettivo di avviare un servizio per facilitare la realizzazione di prototipi e accorciare i tempi di sviluppo. Per far questo sono stati scelti i migliori snippet, pattern e template per riunirli in Foundation, il framework che è stato pubblicato come progetto open source nel 2011 e che da allora continua a essere gratuito al pubblico.

Foundation è un framework responsive per front end, costituito da efficienti componenti HTML e CSS per la configurazione UI (User Interface), vari snippet e template ma anche numerose estensioni JavaScript opzionali. Il web framework ha una struttura a moduli ed è stato progettato per la configurazione di progetti accessibili da diversi dispositivi; viene distribuito con la Licenza MIT e può essere scaricato sia dalla homepage ufficiale sia su GitHub. Dalla versione Foundation 4.0 vale la premessa lavorativa “Mobile First”, per cui da allora si opera con l’aiuto di diversi moduli nuovi all’ottimizzazione della prestazione e all’alleggerimento della dimensione dei file all’interno del framework. In aggiunta alla versione standard di Foundation, ZURB ha pubblicato anche altre varianti per lo sviluppo di newsletter via mail (Foundation for Emails) e siti one page (Foundation for Apps).

Foundation, il framework web responsive caratterizzato dalla sua struttura modulare, ne giova innanzitutto in flessibilità. Avete la possibilità di decidere già prima del download quali componenti scegliere e quali invece no: in questo modo siete in grado di comporre la vostra variante personalizzata della raccolta di codice web senza essere vincolati a scaricare moduli di cui non avete bisogno. Se poi dovesse capitare che vi accorgete che necessitate di un componente che non avevate selezionato al momento del download, potete aggiungerlo comodamente al framework in seguito. Allo stesso modo è anche possibile rimuovere dei moduli che non vi sono più utili: così vi è sempre garantita la possibilità di disporre unicamente delle funzioni che ritenete veramente necessarie per la realizzazione del vostro progetto web.

Per Foundation 6.0 avete a disposizione una scelta di oltre 40 componenti appartenenti ai sette settori seguenti:

• Grid: Il componente decisivo per un web design responsive è rappresentato dal layout flessibile di Grid, con una larghezza conforme agli standard di 1200 pixel. Potete anche deselezionare questo modulo, tuttavia il sistema costituisce la base per il design di un progetto web che sia accessibile da diversi dispositivi e compatibile su diverse scale di risoluzione. Oltre a ciò, a partire dalla versione 6.0 esiste anche la possibilità di scegliere il modulo “Flex Grid”, il quale permette un posizionamento degli elementi ancora più flessibile operando sulla base del modello flexbox CSS (come ad esempio un’organizzazione orizzontale o verticale degli oggetti).

• General: Tra i moduli generali (di cui ufficialmente fa parte anche Grid) si contano in primis le classi float e visibility, grazie alle quali potete definire regole di comportamento per quanto riguarda il posizionamento e la visibilità di singoli elementi; inoltre in questo settore trovate anche un componente per la realizzazione di formulari, come anche il modulo della tipografia contenente le formattazioni di base per la scrittura e il testo.

• Control: Qui sono contenuti tutti gli elementi interattivi più essenziali del vostro progetto web. Si tratta ad esempio di bottoni che con un click guidano l’utente altrove oppure che fanno chiudere elementi selezionati. Inoltre esistono dei moduli con l’aiuto dei quali potete integrare slider e pulsanti con modalità on/off.

• Navigation: Nella configurazione del front end non possono certo mancare elementi di navigazione, per cui anche per il vostro progetto da realizzare con ZURB Foundation avete a disposizione una grande varietà di moduli con i quali impostare barre di menu e menu (a tendina, lista a cascata, drilldown), aggiungere percorsi di navigazione (breadcrumbs) oppure aggiungere il numero alle pagine.

• Container: I container rappresentano una fantastica opportunità di includere diversi elementi come ad esempio testo, immagini o video in uno spazio comune. Qui si trovano stili per i classici widget di contenuto come il menu a tendina, i tab, i settori a cascata o le finestre di dialogo modale.

• Media: All’interno della rubrica “Media” trovate i moduli del framework che vi saranno utili per l’incorporamento di elementi multimediali. Il componente “Flex Video”, ad esempio, vi supporta nell’inserimento di video e si assicura che il contenuto venga adattato alle diverse dimensioni del display e ai diversi tipi di risoluzione. In aggiunta ci sono anche componenti per le immagini in anteprima nonché utili consigli per l’utilizzo dei tool.

• Plug-in: Infine potete scegliere alcune estensioni molto utili per ZURB Foundation che vi facilitano il lavoro con il framework web. Con la libreria “Motion UI”, ad esempio, avete la possibilità di scaricare una libreria molto utile, anche se disponibile solo per la variante Sass, che rende la realizzazione di passaggi e animazioni UI un gioco da ragazzi.

Inoltre, prima del download, potete scegliere se definire alcune impostazioni standard per il framework. Tra queste si contano opzioni per la modifica del numero o dello spessore delle colonne e per la larghezza massima del sistema Grid, oltre che diverse impostazioni cromatiche e la determinazione della direzione del testo (da sinistra a destra o da destra a sinistra). Se prima volete fare un test del framework senza studiare il funzionamento dei singoli moduli, potete scaricare Foundation anche come versione completa (Complete) o in alternativa come variante di base alleggerita (Essential).

Se siete soddisfatti delle opportunità offerte dal CSS e trascrivete quindi gli stili semplicemente sul file CSS scaricato, avete sicuramente preso la giusta decisione. Tuttavia il framework Foundation dispone di un’ulteriore caratteristica speciale: le basi del codice CSS sono scritte nel linguaggio dei fogli di stile Sass (Syntactically Awesome Stylesheets), che è un cosiddetto preprocessore per il CSS. Sass fa sì che possiate lavorare su fogli di stile .scss che possono successivamente essere compilati o trascritti all’interno dei popolari file .css e che vengono poi letti e interpretati dai browser.

Se adoperate la variante Sass del framework di ZURB, potrete godere dei seguenti vantaggi:

• Sintassi semplificata (Sass o CSS), che facilita la scrittura di fogli di stile

• La possibilità di definire dei modelli (Mixins) per salvare i format ricorrenti a livello centrale e integrarli a piacimento

• Combinazione semplice di diversi fogli di stile per minimizzare le request HTTP

• Utilizzo di variabili e funzioni per scambiare colori, distanze, font, e così via, a livello centrale

• Il codice può essere semplicemente strutturato grazie a Nesting in ordine gerarchico, permettendo di lavorare più pulita senza troppe stringhe di codice

Il compiler in Sass è originariamente scritto in Ruby. Se comunque non utilizzate questo linguaggio di programmazione, non siete costretti a installarlo per Sass poiché con LibSass avrete a disposizione un’alternativa scritta in C. LibSass funziona con tutti i sistemi operativi in uso ed è installabile con facilità su un workflow Node.js, ovvero per effettuare modifiche al codice in Sass e tradurle automaticamente in CSS.

Con il passaggio dalla versione 5 a Foundation 6.0, ZURB ha diminuito ancora una volta la dimensione del file dell’intero framework: con i suoi 60 KB di CSS e 84 KB di JavaScript, Foundation gode della fama di essere una piattaforma di sviluppo tra le più slanciate e leggere che ci sia. Grazie alla già citata struttura modulare e a una certa libertà della personalizzazione, riuscite addirittura a diminuire ulteriormente la dimensione del framework. In combinazione con il Grid flessibile e i diversi attributiARIA (ad esempio per la trasposizione di un’efficace navigazione via tastiera) implementati da ZURB, le condizioni di base, indispensabili per la realizzazione di un progetto web che sia compatibile su diverse piattaforme e dispositivi, si possono ritenere del tutto soddisfatte. Gli attributi ARIA sono documentati al meglio e sono disponibili laddove intendete ottimizzare l’accessibilità del vostro sito web in maniera significativa.

Se lavorate con la versione Sass del framework vi assicurate di ampliare le vostre possibilità di configurazione degli elementi di design e di layout inseriti. L’utilizzo di questi fogli di stile speciali non è affatto semplice per i novizi e richiede un certo periodo di apprendimento, cosa che vale in generale anche per la piattaforma. Anche l’integrazione di componenti esterni, come anche dei moduli e dei progetti di Foundation in un altro framework oppure in un CMS risulta molto complicato. I piccoli punti deboli che ZURB Foundation mostra rispetto ad altri framework CSS, come ad esempio Twitter Bootstrap, sono la varietà limitata di template e il mancato supporto di versioni più vecchie di Internet Explorer.

ZURB Foundation accompagna gli sviluppatori dal primo prototipo fino al sito web pronto all’uso ed è caratterizzato soprattutto dalla sua efficienza. Se vi accorgete che alcuni componenti sono superflui, avete la possibilità di deselezionarli senza causare ripercussioni sulla funzionalità di altri elementi. In conclusione il framework CSS si contraddistingue per un codice particolarmente slanciato che evidenzia il leitmotiv eletto da ZURB “Mobile First”. Insieme al sistema estremamente flessibile di Grid, che potete adattare facoltativamente con Sass, il framework risulta ideale per lo sviluppo di front end responsive che hanno il vantaggio di possedere un’alta velocità nel caricamento dei dati e una grande accessibilità, oltre che adattarsi a diverse dimensioni di schermo.

Potete utilizzare il framework di ZURB anche per la realizzazione di progetti web personalizzati e magari più complessi, tuttavia ciò è connesso a un notevole sovraccarico di energie e presuppone una buona comprensione degli snippet.