Front End
Quale framework css scegliere per il tuo prossimo progetto

Un framework css per domarli tutti

Frank Vessia
10 ott 2020
Tempo di lettura: 9 minuti, 6 secondi

Se ti è balenata la malsana idea di cambiare il framework css meglio sapere cosa c'è di valido oggi


Usare un framework css è un'esperienza che influisce pesantamente sul workflow lavorativo perchè richiede molto tempo per comprenderlo appieno e una volta padroneggiato è difficile cambiarlo, dopo le ore di sperimentazioni, test, progetti e nottate passate a studiarlo e a ricordarsi tutte le classi e gli elementi che lo compongono.

Questa guida si rivolge a te che devi iniziare a lavorare con un nuovo framework o a te che già ne utilizzi uno ma vorresti provare qualcosa di diverso. Ecco la mia top 7:

Bootstrap

Bootstrap 5C'è poco da dire su Bootstrap, se non lo conosci chiudi subito questo blog e torna nel tuo angolo buio :) Con quasi 10 anni all'attivo è stato uno dei primi framework css a essere stato reso disponibile per tutti da due sviluppatori che lavoravano per Twitter, difatti il primo nome era Twitter Blueprint. Ha dato il via al boom dei framework css e ad oggi è utilizzato su milioni di siti e applicazioni web, vanta una community vastissima (il progetto è su GitHub) e da poco è stata rilasciata la tanto attesa versione 5 che dopo anni, si distacca dalle dipendenze di jQuery e offre una libreria proprietaria di icone.

Bootstrap è composto principalmente da una parte css (144kb) e da una javascript (83kb). Nei sorgenti puoi trovare i file Sass per modificare le impostazioni di default ed espandere il framework come meglio credi con funzioni e personalizzazioni.

Con un framework di questo tipo è quasi impossibile trovarsi in delle situazioni non previste, c'è praticamente tutto quello che ti serve e forse anche troppo (griglie, form, bottoni, modali, tooltips,alerts, sliders, dropdowns ecc...), per questo devi valutare bene il tipo di progetto che andrai a realizzare, se necessita di tutta questa potenza che si traduce in pesantezza in kb delle librerie che dovrai includere. Potresti anche utilizzare solo quello che ti serve generando i tuoi files css +js finali. La griglia di bootstrap prevede diversi breakpoints fino ad un massimo di 1400px.

Al momento la versione 5 è fase alpha 2 quindi soggetta a modifiche piuttosto consistenti e frequenti, ma puoi benisismo usare la versione 4 che è tutt'ora mantenuta.

Vantaggi: tutti

Svantaggi: curva di appendimento alta, molti elementi da dover ricordare, richiede personalizzazione per evitare di ottenere siti troppo "Bootstrap style"


Ui Kit

Ui Kit 3Questo framework mi piace un bel po, è molto "slick" anche se non è così vasto come Bootstrap ma è sicuramente un'ottima scelta per progetti ben definiti in partenza. Attualmente sono alla versione 3.5.8 per un peso totale di 373kb (css) e 192kb (js). Questo framework non richiede jQuery, è composto da file Less e Sass ed è possibile personalizzarlo tramite un editor online molto completo che permette anche il caricamento di file propri in formato Less e alla fine di salvare il tutto e compilare il css finale.

Se sei uno sviluppatore Vue.js o React, UiKit potrebbe essere la scelta logica e pratica per i tuoi progetti, si autoinizializza poichè è sempre in ascolto del DOM quindi è integrabile perfettamente con i suddetti linguaggi, puoi approdonfire il discorso javascript qui

Personalmente mi piace la gestione delle tabelle e dei pulsanti, hanno un aspetto molto bello, pulito e professionale e degna di nota è anche la gestione di componenti quali le notifiche, il parallax e il sistema di paginazione dinamico. Ottimo per progetti web che richiedono la manipolazione di dati quindi con molte schermate composte da tabelle, menu di controllo e pulsanti.

Vantaggi: ben strutturata, design moderno e codice molto pulito, adatta a chi lavora con vue.js e react

Svantaggi: un po pensante, difficile trovare aiuto online in caso di problemi


Foundation

Zurb Foundation 6Possiamo dire che Foundation è il capostipite dei framework css (settembre 2011) e uno dei più vasti in assoluto, sviluppato sulla base della Zurb Style Guide già creata nel 2008 e solo dopo alcune evoluzioni è diventata Fondation nel 2011. Attualmente alla versione 6.6.3 con css (296kb) e js (502kb) è composto da una moltitudine di estensionie e plugins, è quasi impossibile fare un conteggio di tutti gli elementi combinabili per riuscire ad avere una chiara idea della pesantezza totale, ogni progetto va visto a se, tant'è che gli stessi sviluppatori hanno diviso Foundation in due versioni, quella classica per siti e quella dedicata alla strutturazione di emails.

Uno dei punti di forza di Foundation è la vastità delle risorse messe a disposizione di chi vuole imparare ad utilizzare ed espandere il framework nei minimi dettagli, Zurb ha anche una academy (a pagamento) per chi non trovasse sufficienti i tutorials gratuiti e tutti i temi di esempio scaricabili e utilizzabili come ottimi punti di partenza.

La base di partenza di Foundation è rappresentata da jQuery, HTML5 Boilerplate e Normalizr e poi esteso con plugins ed elementi creati in Sass e Javascript.

Alcuni punti di forza sono rappresentati dal sistema avanzato della griglia che a differenza di altri sistemi basati solo sul float introduce già dalla versione 6.4 i flexbox aggiungendo caratteristiche come l'allineamento e l'autoresize.

Vantaggi: molto vasta, tanti esempi e tante risorse online per imparare ad usarla

Svantaggi: va configurata al meglio per evitare di includere troppi plugins che non sempre servono


Tailwind

Tailwind cssQuesto framework relativamente giovane, versione 1.8 (3 anni dalla prima versione) è sicuramente uno di quelli da tenere sotto controllo poichè è stato pensato per offrire un substrato completamente configurabile per creare ciò di cui hai bisogno. Non ci sono elementi predefiniti, come dicono gli stessi sviluppatori questo è un punto di forza del framework poichè spesso capita di dover modificare alcuni elementi già predefiniti dovendo perdere del tempo, mentre con Tailwind sei tu a dover creare ciò che ti serve grazie ad una serie di "low-level utilities" che combinate tra loro danno il risultato voluto.

É un approccio decisametne interessante che condivido poichè apprezzo i framework "liberi" senza restrizioni, ovviamente questa libertà ha un costo, cioè il tempo iniziale che bisognerà dedicare per creare quello che ci serve di volta in volta, anche se finito di creare un elemento, diciamo una card per visualizzare un prodotto, possiamo salvare lo "snippet" e riutilizzarlo per un progetto futuro. Questo framework si basa quindi sul concetto del "crea quello che ti serve e riutilizzalo", quindi sicuramente nel tempo e dopo diversi progetti di potranno gestire diverse esigenze con estrema velocità.

Facciamo un esempio, se volessi creare una card bianca con padding, bordi arrotandati e ombra mi basterebbe usare queste classi combinate nel div
in questo modo:

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl"></div>

Normalmente avremmo una classe del tipo .card mentre con Tailwind combiniamo piccole classi, ognuna con una funzione specifica. A prima vista sembra un po macchinoso ma con il tempo diventa un modo molto divertente e pratico per costruire elementi.

Purtroppo la libreria è molto pensante (quasi 2Mb) anche se è possibile usare il cdn e il metodo classico di utilizzo prevedere l'installazione tramite npm in modo da poter disporre di tutte le personalizzazioni del caso che con la versione "statica" o con cdn non avremmo.

Vantaggi: estremamente personalizzabile

Svantaggi: pesante


Material UI

Material UIQuesto framework (versione attuale 4.11.0) nasce dall'esigenza di facilitare la creazione di applicazioni React con material design di google (le linee guida per i design di applicazioni). Nato nel 2014 vanta una folta schiera di utilizzatori, è il classico framework che ricalca l'interfaccia stessa di google quindi molto apprezzato. Poichè Material UI si basa su React è fornito di API per l'integrazione con esso in modo da usare i componenti direttamente con React.

Il framework è vasto e completo e ha degli elementi che non troviamo in altri, tipo le transfer list oppure i drawers o anche gli steppers (per i form wizard). Interessante anche il componente Data Grid per la gestione complessa di dati tabellari, fornito anche con una versione pro commerciale.

Questo framework è pensato molto per applicazioni create con React, usarlo solo come framework css statico sarebbe un po riduttivo, bisogna usarlo al meglio sfruttando tutte le caratteristiche che offre, dalle API agli Hooks per React con la creazione di stili e componenti personalizzati, sicuramente uno strumento non per tutti ma che garantisce dei risultati molto profesisonali.

Vantaggi: vasto e completo, si inegra alla perfezione con React

Svantaggi: complesso da gestire se lo si vuole utilizzare appieno


Bulma

Bulma css frameworkIl framework Bulma (versione 0.9.1) è un altro progetto abbastanza recente che si propone come alternativa a Bootstrap. Si basa su flexbox ed offre una sintassi molto chiara e facile da apprendere. Questo è un framework puramente css (236kb) quindi non è accompagnato da plugins javascript il che può essere sia un pro che un contro.

Graficamente si presenta molto simile a Bootstrap e dispone si una serie di estensioni esterne alla libreria principale che coprono diverse esigenze grafiche, come calendari, divider, steps, timelines ecc... Le icone sono basate nativamente su fontawesome sia 4 sia 5 e modificare gli elementi grafici è davvero intuitivo, tutto basato su una sintassi logica come is- o has- per indicare determinate situazioni del tipo is-large oppure has-addons . La griglia si estende fino ad un massimo di 1408px.

Vantaggi: facile da implementare con classi semplici ed intuitive

Svantaggi: basico, non offre tantissimo in partenza


Semantic UI

Semantic UICome suggerisce il nome stesso questo framework si basa su una logica semantica, con un codice "human friendly" come dicono nella loro home page. Giunto alla versione 2.4 con un peso di 800kb per il css e 700kb per il javascript, il framework si propone come una soluzione facile da implementare nei propri progetti grazie appunto alla semplicità delle classi utilizzate che al posto di essere dei codici incomprensibili utillizzano parole di uso comune quindi facilmente assimilabili per lo sviluppatore, come button, basic, header, large, huge, segment, right ecc...niente di eccessivamente sraordinario, sono cose già viste in altri framework, quello che spicca di Semantic UI è altro, ovvero delle API robuste e ben fatte che permettono di integrare dati esterni e creare interazioni complesse con gli elementi grafici in modo molto semplice e una ricca libreria di elementi, alcuni dei quali non comuni ad altri framework, come i placeholders, i reveals oopure i flags per far apparire le bandiere delle nazioni.

Il sistema di griglia è molto interessante, utilizza 16 colonne, tante rispetto alle solite 12, che offre forse più versatilità per situazioni particolari, mentre le righe (row) possono essere dichiare come container delle colonne oppure no, in quel caso verranno considerate automaticamente, utile per flow automatici. Sicuramente da studiare a fondo perchè questa griglia offre diverse opzioni per svariate esigenze.

Vantaggi: completo, molti elementi grafici, buone API per sviluppo interattivo

Svantaggi: molto pesante

Conclusioni


Spero che questa panoramica di sia stata utile in qualche modo, ci sono molti altri framework che probabilmente andrebbero menzionati e altri ne usciranno, magari scriverò un altro articolo a riguardo. Scegliere il giusto framework non è facile, richiede del tempo e molti test, specie per quelli usciti da poco quindi in fase di miglioramento, tuttavia sta sempre a te che sviluppi un progetto sfruttare al meglio ciò che deciderai di scegliere e modificare o implementare le funzionalità che ti serviranno per un determinato progetto, perchè sicuramente qualcosa di non  previsto dal framework capita sempre.