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:
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à.
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:
SIZE | BREAKPOINTS – DIMENSIONE VIEWPORT | DEVICE |
Mini | Da 0px a 479px | Smartphone in modalità portrait |
Small | Da 480px a 767px | Smartphone in modalità landscape |
Medium | Da 768px a 959px | Tablet in modalità portrait |
Large | Da 960px a 1199px | Tablet in modalità landscape, Desktop standard |
Xlarge | Maggiore o uguale a 1200px | Desktop di grandi dimensioni |
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:
Per maggiori informazioni relativamente all’importanza del box-sizing si veda anche il precedente capitolo “Il sistema a griglie” di questo manuale
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.