ZURB Foun­da­tion: l’UI framework CSS per un front end re­spon­si­ve

Dal 1998 l’agenzia di design ZURB si occupa di offrire un supporto alle aziende per la con­fi­gu­ra­zio­ne di siti e servizi web di alta qualità. Nel 2008 gli elementi di stile interni che venivano applicati ai progetti web dei clienti sono poi stati riassunti nella “Style Guide” di ZURB; due anni dopo l’agenzia si è decisa a creare un framework sulla base di questa guida: l’obiettivo era creare un servizio che potesse fa­ci­li­ta­re la rea­liz­za­zio­ne di prototipi e al contempo che potesse ac­cor­cia­re i tempi di sviluppo. A questo proposito sono stati scelti i migliori snippet, pattern e template per riunirli in Foun­da­tion, il framework che è stato pub­bli­ca­to come progetto open source nel 2011 e che da allora continua a essere gratuito al pubblico.

Foun­da­tion è un framework re­spon­si­ve per front end, co­sti­tui­to da ef­fi­cien­ti com­po­nen­ti HTML e CSS per la con­fi­gu­ra­zio­ne UI (User Interface), vari snippet e template ma anche numerose esten­sio­ni Ja­va­Script opzionali. Il web framework ha una struttura a moduli ed è stato pro­get­ta­to per la con­fi­gu­ra­zio­ne di progetti ac­ces­si­bi­li da diversi di­spo­si­ti­vi; viene di­stri­bui­to con la Licenza MIT e può essere scaricato sia dalla homepage ufficiale sia su GitHub. Dalla versione Foun­da­tion 4.0 vale la premessa la­vo­ra­ti­va “Mobile First”, per cui da allora si opera con l’aiuto di diversi moduli nuovi all’ot­ti­miz­za­zio­ne della pre­sta­zio­ne e all’al­leg­ge­ri­men­to della di­men­sio­ne dei file all’interno del framework. In aggiunta alla versione standard di Foun­da­tion, ZURB ha pub­bli­ca­to anche altre varianti per lo sviluppo di new­slet­ter via mail (Foun­da­tion for Emails) e siti one page (Foun­da­tion for Apps).

Foun­da­tion, il framework web re­spon­si­ve ca­rat­te­riz­za­to dalla sua struttura modulare, ne giova in­nan­zi­tut­to in fles­si­bi­li­tà. Avete la pos­si­bi­li­tà di decidere già prima del download quali com­po­nen­ti scegliere e quali invece no: in questo modo siete in grado di comporre la vostra variante per­so­na­liz­za­ta della raccolta di codice web senza essere vincolati a scaricare moduli di cui non avete bisogno. Se poi dovesse capitare che vi accorgete che ne­ces­si­ta­te di un com­po­nen­te che non avevate se­le­zio­na­to al momento del download, potete ag­giun­ger­lo co­mo­da­men­te al framework in seguito. Allo stesso modo è anche possibile rimuovere dei moduli che non vi sono più utili: così vi è sempre garantita la pos­si­bi­li­tà di disporre uni­ca­men­te delle funzioni che ritenete veramente ne­ces­sa­rie per la rea­liz­za­zio­ne del vostro progetto web.

Per Foun­da­tion 6.0 avete a di­spo­si­zio­ne una scelta di oltre 40 com­po­nen­ti ap­par­te­nen­ti ai sette settori seguenti:

• Grid: Il com­po­nen­te decisivo per un web design re­spon­si­ve è rap­pre­sen­ta­to dal layout fles­si­bi­le di Grid, con una larghezza conforme agli standard di 1200 pixel. Potete anche de­se­le­zio­na­re questo modulo, tuttavia il sistema co­sti­tui­sce la base per il design di un progetto web che sia ac­ces­si­bi­le da diversi di­spo­si­ti­vi e com­pa­ti­bi­le su diverse scale di ri­so­lu­zio­ne. Oltre a ciò, a partire dalla versione 6.0 esiste anche la pos­si­bi­li­tà di scegliere il modulo “Flex Grid”, il quale permette un po­si­zio­na­men­to degli elementi ancora più fles­si­bi­le operando sulla base del modello flexbox CSS (come ad esempio un’or­ga­niz­za­zio­ne oriz­zon­ta­le o verticale degli oggetti).

• General: Tra i moduli generali (di cui uf­fi­cial­men­te fa parte anche Grid) si contano in primis le classi float e vi­si­bi­li­ty, grazie alle quali potete definire regole di com­por­ta­men­to per quanto riguarda il po­si­zio­na­men­to e la vi­si­bi­li­tà di singoli elementi; inoltre in questo settore trovate anche un com­po­nen­te per la rea­liz­za­zio­ne di formulari, come anche il modulo della ti­po­gra­fia con­te­nen­te le for­mat­ta­zio­ni di base per la scrittura e il testo.

• Control: Qui sono contenuti tutti gli elementi in­te­rat­ti­vi più es­sen­zia­li del vostro progetto web. Si tratta ad esempio di bottoni che con un click guidano l’utente altrove oppure che fanno chiudere elementi se­le­zio­na­ti. Inoltre esistono dei moduli con l’aiuto dei quali potete integrare slider e pulsanti con modalità on/off.

• Na­vi­ga­tion: Nella con­fi­gu­ra­zio­ne del front end non possono certo mancare elementi di na­vi­ga­zio­ne, per cui anche per il vostro progetto da rea­liz­za­re con ZURB Foun­da­tion avete a di­spo­si­zio­ne una grande varietà di moduli con i quali impostare barre di menu e menu (a tendina, lista a cascata, drilldown), ag­giun­ge­re percorsi di na­vi­ga­zio­ne (brea­d­crumbs) oppure ag­giun­ge­re il numero alle pagine.

• Container: I container rap­pre­sen­ta­no una fan­ta­sti­ca op­por­tu­ni­tà 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’in­cor­po­ra­men­to di elementi mul­ti­me­dia­li. Il com­po­nen­te “Flex Video”, ad esempio, vi supporta nell’in­se­ri­men­to di video e si assicura che il contenuto venga adattato alle diverse di­men­sio­ni del display e ai diversi tipi di ri­so­lu­zio­ne. In aggiunta ci sono anche com­po­nen­ti per le immagini in anteprima nonché utili consigli per l’utilizzo dei tool.

• Plug-in: Infine potete scegliere alcune esten­sio­ni molto utili per ZURB Foun­da­tion che vi fa­ci­li­ta­no il lavoro con il framework web. Con la libreria “Motion UI”, ad esempio, avete la pos­si­bi­li­tà di scaricare una libreria molto utile, anche se di­spo­ni­bi­le solo per la variante Sass, che rende la rea­liz­za­zio­ne di passaggi e ani­ma­zio­ni UI un gioco da ragazzi.

Inoltre, prima del download, potete scegliere se definire alcune im­po­sta­zio­ni 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 im­po­sta­zio­ni cro­ma­ti­che e la de­ter­mi­na­zio­ne della direzione del testo (da sinistra a destra o da destra a sinistra). Se prima volete fare un test del framework senza studiare il fun­zio­na­men­to dei singoli moduli, potete scaricare Foun­da­tion anche come versione completa (Complete) o in al­ter­na­ti­va come variante di base al­leg­ge­ri­ta (Essential).

Se siete sod­di­sfat­ti delle op­por­tu­ni­tà offerte dal CSS e tra­scri­ve­te quindi gli stili sem­pli­ce­men­te sul file CSS scaricato, avete si­cu­ra­men­te preso la giusta decisione. Tuttavia il framework Foun­da­tion dispone di un’ulteriore ca­rat­te­ri­sti­ca speciale: le basi del codice CSS sono scritte nel lin­guag­gio dei fogli di stile Sass (Syn­tac­ti­cal­ly Awesome Sty­le­shee­ts), che è un co­sid­det­to pre­pro­ces­so­re per il CSS. Sass fa sì che possiate lavorare su fogli di stile .scss che possono suc­ces­si­va­men­te essere compilati o tra­scrit­ti all’interno dei popolari file .css e che vengono poi letti e in­ter­pre­ta­ti dai browser.

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

• Sintassi sem­pli­fi­ca­ta (Sass o CSS), che facilita la scrittura di fogli di stile

• La pos­si­bi­li­tà di definire dei modelli (Mixins) per salvare i format ri­cor­ren­ti a livello centrale e in­te­grar­li a pia­ci­men­to

• Com­bi­na­zio­ne semplice di diversi fogli di stile per mi­ni­miz­za­re le request HTTP

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

• Il codice può essere sem­pli­ce­men­te strut­tu­ra­to grazie a Nesting in ordine ge­rar­chi­co, per­met­ten­do di lavorare più pulita senza troppe stringhe di codice

Il compiler in Sass è ori­gi­na­ria­men­te scritto in Ruby. Se comunque non uti­liz­za­te questo lin­guag­gio di pro­gram­ma­zio­ne, non siete costretti a in­stal­lar­lo per Sass poiché con LibSass avrete a di­spo­si­zio­ne un’al­ter­na­ti­va scritta in C. LibSass funziona con tutti i sistemi operativi in uso ed è in­stal­la­bi­le con facilità su un workflow Node.js, ovvero per ef­fet­tua­re modifiche al codice in Sass e tradurle au­to­ma­ti­ca­men­te in CSS.

Con il passaggio dalla versione 5 a Foun­da­tion 6.0, ZURB ha diminuito ancora una volta la di­men­sio­ne del file dell’intero framework: con i suoi 60 KB di CSS e 84 KB di Ja­va­Script, Foun­da­tion gode della fama di essere una piat­ta­for­ma di sviluppo tra le più slanciate e leggere che ci sia. Grazie alla già citata struttura modulare e a una certa libertà della per­so­na­liz­za­zio­ne, riuscite ad­di­rit­tu­ra a diminuire ul­te­rior­men­te la di­men­sio­ne del framework. In com­bi­na­zio­ne con il Grid fles­si­bi­le e i diversi attributi ARIA (ad esempio per la tra­spo­si­zio­ne di un’efficace na­vi­ga­zio­ne via tastiera) im­ple­men­ta­ti da ZURB, le con­di­zio­ni di base, in­di­spen­sa­bi­li per la rea­liz­za­zio­ne di un progetto web che sia com­pa­ti­bi­le su diverse piat­ta­for­me e di­spo­si­ti­vi, si possono ritenere del tutto sod­di­sfat­te. Gli attributi ARIA sono do­cu­men­ta­ti al meglio e sono di­spo­ni­bi­li laddove intendete ot­ti­miz­za­re l’ac­ces­si­bi­li­tà del vostro sito web in maniera si­gni­fi­ca­ti­va. Se lavorate con la versione Sass del framework vi as­si­cu­ra­te di ampliare le vostre pos­si­bi­li­tà di con­fi­gu­ra­zio­ne 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 ap­pren­di­men­to, cosa che vale in generale anche per la piat­ta­for­ma. Anche l’in­te­gra­zio­ne di com­po­nen­ti esterni, come anche dei moduli e dei progetti di Foun­da­tion in un altro framework oppure in un CMS risulta molto com­pli­ca­to. I piccoli punti deboli che ZURB Foun­da­tion 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 Foun­da­tion ac­com­pa­gna gli svi­lup­pa­to­ri dal primo prototipo fino al sito web pronto all’uso ed è ca­rat­te­riz­za­to so­prat­tut­to dalla sua ef­fi­cien­za. Se vi accorgete che alcuni com­po­nen­ti sono superflui, avete la pos­si­bi­li­tà di de­se­le­zio­nar­li senza causare ri­per­cus­sio­ni sulla fun­zio­na­li­tà di altri elementi. In con­clu­sio­ne il framework CSS si con­trad­di­stin­gue per un codice par­ti­co­lar­men­te slanciato che evidenzia il leitmotiv eletto da ZURB “Mobile First”. Insieme al sistema estre­ma­men­te fles­si­bi­le di Grid, che potete adattare fa­col­ta­ti­va­men­te con Sass, il framework risulta ideale per lo sviluppo di front end re­spon­si­ve che hanno il vantaggio di possedere un’alta velocità nel ca­ri­ca­men­to dei dati e una grande ac­ces­si­bi­li­tà, oltre che adattarsi a diverse di­men­sio­ni di schermo.

Potete uti­liz­za­re il framework di ZURB anche per la rea­liz­za­zio­ne di progetti web per­so­na­liz­za­ti e magari più complessi, tuttavia ciò è connesso a un notevole so­vrac­ca­ri­co di energie e pre­sup­po­ne una buona com­pren­sio­ne degli snippet.