La parola ‘framework’ associata al web design indica, in genere, un insieme di file 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 del progetto.

Il fine ultimo di un framework, in fin dei conti, è proprio quello di costituire la base dello sviluppo a partire dalla quale si potranno poi ottenere prodotti finiti (siti web nel nostro caso) completamente diversi in fatto di scelte stilistiche ed estetiche, senza dover ogni volta “reinventare” la ruota ma, al contrario, potendosi avvalere di un’ampia base di componenti perfettamente riutilizzabili.

Inizialmente i framework CSS sono nati con una finalità ben precisa, vale a dire la strutturazione di una griglia e, conseguentemente, del solo layout del sito; con l’andare del tempo, e soprattutto con l’avvento del responsive design, sono state sviluppate soluzioni sempre più complesse ed evolute fino alla realizzazione di framework che sarebbe piuttosto riduttivo considerare come destinati solamente alla creazione e gestione di semplici griglie.

Davanti a prodotti di questo tipo si preferisce parlare infatti di “front end framework” o “UI framework” e si va ben oltre la semplice griglia perché consentono di configurare rapidamente l’intera interfaccia di un sito o di un’applicazione, dalla tipografia alla navigazione fino alle più svariate interazioni javascript.

Allo stato attuale, parlando di framework per la creazione dell’interfaccia utente, si intende un sistema completo che abbia almeno le seguenti 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 la fatica di risolvere problemi di incompatibilità tra i browser
• dovrebbe fornire una serie di plugin Javascript per widget e componenti di interfaccia come slideshow, tooltip, box modali ecc…
• deve essere perfettamente responsivo

Uikit, come indicato nella pagina del progetto (http://getuikit.com/index.html ), è “un front-end framework leggero e modulare che consente di sviluppare rapidamente interfacce web”, che soddisfa appieno tutte le caratteristiche appena elencate e che si propone, grazie alla sua elevata modularità e alla sua facilità di utilizzo, come ottima alternativa ai più conosciuti (e per certi versi anche più pesanti) Bootstrap o Foundation.

Il set di componenti e di funzionalità messe a disposizione da questo framework può essere suddiviso in due distinti ambiti: CORE e COMPONENTS

UIKIT – CORE

E’ il cuore di tutto il progetto e, come tale, comprende tutto il set dei componenti di base del framework.

Mette a disposizione dell’utente più di 30 diversi componenti perfettamente combinabili l’uno con l’altro e suddivisi in 6 diverse categorie a seconda di quello che è il loro scopo e di quelle che sono le loro specifiche funzionalità.

• Defaults: i componenti presenti all’interno di questa sezione consentono di normalizzare i vari elementi HTML in maniera tale da poter gestire al meglio eventuali problemi legati alla compatibilità cross browser. Sono presenti anche alcuni stili di base per i principali tag HTML

• Layout: all’interno di questa sezione possiamo trovare tutti i componenti necessari per definire e creare il layout del sito, partendo da una griglia completamente responsiva passando attraverso un semplice sistema di pannelli per finire con tutta una serie di utilità mediante le quali poter centrare e allineare i vari elementi della pagina web, nasconderli o visualizzarli in base alle dimensioni del viewport ecc…

• Navigations: all’interno di questa sezione possiamo trovare tutti gli elementi utilizzati da uikit per gestire i diversi sistemi di navigazione, dalle navigation bar, alle side bar, alle briciole di pane ecc…

• Elements: all’interno di questa sezione vengono definiti gli stili per i componenti HTML di base come liste, form, tabelle ecc…

• Common: all’interno di questa sezione troviamo gli elementi più comunemente utilizzati nelle pagine di un sito web vale a dire pulsanti, icone, overlays, animazioni, alert ecc…

• Javascript: i componenti presenti all’interno di questa sezione si basano sull’utilizzo di javascript e necessitano quindi dell’utilizzo delle apposite librerie del framework. E’ in questa sezione che possiamo trovare, ad esempio, tutto ciò che serve per poter attivare e gestire un menu Off-canvas (per maggiori informazioni relativamente a questa particolare tipologia di menu si veda anche il precedente capitolo “Sistemi di Navigazione” di questa guida)

ATTENZIONE! L’intero set di componenti base è racchiuso all’interno di un unico file uikit.css disponibile sia in versione “normale” che minificata.

UIKIT – COMPONENTS

Uikit mette a disposizione dell’utente anche tutta una serie di componenti avanzati non inclusi nella parte core del framework.

Si tratta di componenti come Slider, Slideshow, Date Picker, Parallasse ecc… non strettamente necessari alla realizzazione di un sito web e che possono quindi essere o meno utilizzati a seconda dello specifico progetto che si intende realizzare.

ATTENZIONE! A differenza della parte core, racchiusa in un unico file, ciascuno dei componenti presenti all’interno di questa sezione ha una sua specifica libreria CSS e/o javascript che dovranno quindi essere caricate all’interno del sito in aggiunta ai file uikit.css e uikit.js (parte core del framework)

Anche se piuttosto ovvia, una cosa importante da mettere in evidenza è che per lo specifico progetto che stiamo realizzando potrebbe anche non essere necessario utilizzare tutti i componenti e gli elementi messi a disposizione dal framework.

In questo senso l’elevata modularità di uikit torna particolarmente utile in quanto ci permette di non dover necessariamente appesantire la pagina web con elementi CSS o Javascript non strettamente necessari.

Nel caso in cui dovessimo decidere di non utilizzare all’interno del nostro progetto alcuni dei componenti aggiuntivi messi a disposizione dal framework, sarà sufficiente, ovviamente, non caricare all’interno della pagina le librerie CSS e/o Javascript relative a quei componenti che effettivamente non vengono utilizzati.

BREAKPOINTS

Una delle caratteristiche principali di un front-end framework è, come precedentemente evidenziato, quella di essere perfettamente responsivo.

Uikit soddisfa appieno questo requisito mettendo a disposizione dell’utente tutta una serie di classi responsive (e relative media query) che consentono di adattare perfettamente la visualizzazione dei contenuti del sito a differenti dimensioni del viewport.

I breakpoint utilizzati per gestire le diverse visualizzazioni sono impostati su 5 diverse dimensioni di base identificate come: Mini, Small, Medium, Large e Xlarge.

A ciascuna di queste dimensioni corrisponde una ben precisa larghezza in pixel del viewport (e corrispondentemente una certa categoria di dispositivi) come indicato nella sottostante tabella:

ATTENZIONE! I valori dei breakpoint presenti in tabella sono quelli presenti a default nel framework.

In ogni caso è sempre possibile modificare tali valori secondo le specifiche esigenze del caso intervenendo direttamente all’interno del file uikit.css oppure, in maniera molto più semplice, impostando i valori desiderati, ancora prima di effettuare il download del framework, mediante l’apposito Customizer (per maggiori informazioni in merito alla personalizzazione del framework si veda anche la sezione “Temi Personalizzati” di questa guida)

Concludiamo questa panoramica generale del framework con altre due considerazioni piuttosto importanti:

• Uikit utilizza box-sizing impostata sul valore border-box in maniera tale che le larghezze dei propri componenti rimangano consistenti indipendentemente dal padding che può essere loro applicato. E’ quindi possibile aggiungere padding o bordi ai componenti del framework senza che questo vada a compromettere il layout della pagina

Per maggiori informazioni relativamente all’importanza del box-sizing si veda anche il precedente capitolo “Il sistema a griglie” di questo manuale

• Considerando l’ottimo funzionamento del framework in relazione alla definizione e creazione del layout della pagina, è bene non apportare modifiche ai suoi componenti principali. Nel caso in cui sia necessario personalizzare alcuni elementi si consiglia quindi di inserire questi stessi elementi all’interno di un componente di base, come può essere una griglia o un pannello e stilizzare poi questi elementi piuttosto che la griglia o il pannello stesso.

Nella realizzazione di un sito Passweb responsivo utilizzeremo proprio questo approccio: ci preoccuperemo quindi di strutturare il layout della pagina utilizzando i componenti di base del framework e all’interno di questi componenti andremo poi ad inserire la “normale” componentistica Passweb che potrà poi essere stilizzata mediante lo Style Editor così come avviene in generale per tutti i siti Passweb.