Dalle griglie ai front-end framework

La parola 'framework' associata al web design indica in genere un set di file con stili CSS da associare a strutture standardizzate di codice HTML per velocizzare e supportare lo sviluppo del sito, la creazione e l'implementazione dei vari elementi dell'interfaccia, specie nelle fasi iniziali di un progetto.

Il fine ultimo di un framework, in fin dei conti, è appunto quello di costituire la base di partenza nello sviluppo, come le fondamenta su cui poi si potranno realizzare edifici diversissimi in fatto di scelte estetiche e stilistiche. Il fattore chiave è che consentono di non dover reinventare ogni volta la ruota, fornendo una base di componenti riutilizzabili in diversi progetti.

Per essere più chiari: se dobbiamo inserire su una pagina un modulo per la paginazione, usando un framework possiamo evitare di dover ogni volta concepire e reinventare il codice. Utilizzando una struttura HTML come questa, con le classi giuste sul tag giusto:

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>

otterremo sempre, senza dover fare altro, questo risultato:

Su questa base (le fondamenta) abbiamo poi la possibilità di personalizzare la presentazione intervenendo sugli stili.

Framework semplici e framework completi

Inizialmente, i framework CSS sono stati rivolti nella pratica ad una finalità precipua: la strutturazione di una griglia e del layout. Dai tempi di 960gs l'idea si è estesa e il panorama ha visto emergere soluzioni sempre più complesse e integrate, fino alla realizzazione di framework che sarebbe riduttivo etichettare come soltanto destinati alla composizione di griglie.

Davanti a prodotti di questo tipo, infatti, si preferisce adottare denominazioni come 'front end framework' o 'UI framework'. Si va ben oltre la griglia, perché consentono di configurare rapidamente l'intera interfaccia di un sito o di un'applicazione, dalla tipografia alla navigazione fino alle interazioni Javascript.

In questa guida ci occuperemo di questa categoria di framework, che potremmo definire 'completi'.

Allo stato attuale, parlando di framework per la creazione dell'interfaccia utente, si intende di solito un sistema completo che abbia almeno queste caratteristiche:

• deve fornire le basi per la costruzione di solidi layout a griglia;
• deve offrire un CSS strutturato e modulare per la formattazione dei principali elementi dell'interfaccia attraverso l'utilizzo di classi standardizzate nel codice HTML;
• deve risparmiare il più possibile allo sviluppatore l'ingrata fatica di risolvere le incompatibilità tra i browser;
• dovrebbe fornire una serie di plugin Javascript per widget e componenti di interfaccia come slideshow, tooltip, box modali e via dicendo;
• dovrebbe essere responsivo.

Tra tante soluzioni (qui un'utile pagina comparativa), due si sono distinte negli ultimi anni:

• Bootstrap
• Foundation

Il primo ha per certi versi fatto da modello e ispirazione, anche perché nato all'interno di Twitter, ottenendo un clamoroso successo tra gli sviluppatori di tutto il mondo e generando intorno a sé una community attiva e ispirata. Il secondo, passo dopo passo, ha saputo guadagnarsi spazio in quanto a considerazione grazie a un lavoro oggettivamente ben fatto e sempre più rifinito.

Al momento in cui pubblichiamo questa guida, in attesa della versione 3.0 di Bootstrap, Foundation è senz'altro avanti in specifihe aree, a partire dalle funzionalità responsive e dalla griglia. In attesa di dedicare lo spazio che merita a Bootstrap in quella che sarà la versione 3.0, dedichiamo in questa guida la nostra attenzione a Foundation 4.

Partendo dal consueto progetto allegato, analizzeremo i principali aspetti del framework, dai componenti CSS e Javascript fino alle strategie e tecniche per la personalizzazione. La lettura delle lezioni sia sempre accompagnata da quella delle documentazione ufficiale. Buona lettura.