Alternative a Bootstrap: una panoramica dei migliori framework per front end

Colui che si ritrova a lavorare su un front end destinato al web, e che quindi si occupa di progettazione di modelli per la creazione di siti e applicazioni, si troverà a dover fronteggiare diverse sfide: innanzitutto l’interfaccia dovrà possedere un’estetica adeguata ma, al contempo, non dovrà tralasciare il fattore dell’usabilità. Siccome oggigiorno esiste una varietà piuttosto grande di dispositivi e di browser attraverso i quali gli utenti navigano il web, gli elementi visivi e tecnici scelti devono necessariamente funzionare su ogni tipo di piattaforma. In più, anche l’accessibilità e una buona base SEO sono elementi assolutamente da non trascurare durante la programmazione front end.

Per non dover iniziare da zero durante lo sviluppo di un’interfaccia web, molti programmatori si servono di cosiddetti “UI-framework” (User Interface framework), i quali vanno ad adattarsi all’interfaccia utente. In questo processo la scelta ricade spesso su Bootstrap, progettato da Twitter, le cui componenti sono ottimizzate per tutti i dispositivi mobili e i browser esistenti, e che possono quindi essere adeguate alle proprie esigenze senza problemi. Tuttavia l’ampia diffusione della piattaforma fa sì che esistano molti siti web in rete che sono stati creati con il codice standard di Bootstrap e che quindi finiscono per assomigliarsi tra loro. Un piccolo punto a sfavore è inoltre rappresentato dalla complessità del framework front end, il quale ricorre a molto CSS e JavaScript, rendendo di conseguenza il linguaggio di markup HTML più vasto: questo può avere conseguenze negative, ad esempio sul tempo di caricamento del progetto web. È sì possibile scaricare file script e CSS ridotti che contengono solamente le componenti Bootstrap necessarie, tuttavia a questo scopo è necessario affrontare l’argomento più da vicino. In questo modo, semplicità e risparmio di tempo, ovvero i fattori che dovrebbero essere legati all’utilizzo di framework, vanno in parte persi. Ad alcuni sviluppatori, in generale, l’utilizzo di UI framework potrebbe non piacere, motivo per cui risulta allora sensato prendere in considerazione delle alternative a Bootstrap: un’impresa non meno difficile, vista l’enorme scelta a disposizione.

In seguito verranno presentati cinque diversi front end framework che possono essere utilizzati al posto di Twitter Bootstrap e che permettono di sviluppare front end per il web completi e funzionali. Saranno illustrati i relativi vantaggi e svantaggi di ciascun framework, come anche le differenze rispetto a Bootstrap e la vastità d’azione che possiedono le raccolte di codice, così da poter capire a quale tipo di sviluppo si adattano meglio. Infine verrà analizzato come effettivamente funziona lo sviluppo con ciascuna alternativa a bootstrap.

Il framework modulare dell’azienda Foundation ha origine in una guida di linguaggio di stile, che l’agenzia di web design ZURB inizialmente usava solo per i progetti dei clienti. In seguito, ZURB ha iniziato a combinare e pubblicare le numerose componenti HTML-, CSS- e JavaScript nel framework open source. La parte centrale è costituita da un layout a griglia fluida suddiviso in dodici colonne, il quale rende possibile la configurazione di un layout responsive che si adatta automaticamente alle diverse dimensioni del display e alle diverse risoluzioni dei dispositivi finali. Accanto al sistema a griglia, Foundation offre anche i seguenti modelli:

• Slider

• Pulsanti

• Tipografia

• Barre di menu e vari menu

• Contenitori di media

• Classi “float” e “visibility” integrate

Come già a partire dalla versione 4 di Bootstrap, Foundation si basa su Sass, un linguaggio di stile che semplifica in maniera significativa la creazione e l’elaborazione di file CSS; tuttavia al framework di ZURB manca il supporto di Less (ugualmente un linguaggio di stile), offerto invece da Bootstrap. Mentre, per quanto riguarda la scelta di plug-in JavaScript e snippet CSS, si riscontrano a malapena delle differenze tra i due framework, Foundation non è invece particolarmente fornito di template; in più, c’è anche un livello basso di supporto di altre piattaforme.

Comunque sia, il framework di ZURB supera decisamente la soluzione di Twitter relativamente all’individualità di front end sviluppati: il codice CSS che vi sta alla base assicura l’accesso a un design compatto, che può essere adeguato a piacimento senza complicazioni. Alcune classi sono, diversamente da Bootstrap, direttamente incluse, senza che dobbiate aggiungerle in seguito. Un ulteriore vantaggio: ZURB offre diversi corsi, nonché assistenza personale al vostro progetto front end, senza dimenticare, infine, una versione speciale del framework per la creazione di newsletter via mail.

Se dunque intendete utilizzare Foundation per lo sviluppo della vostra interfaccia web, avete la possibilità di scaricare gratuitamente dal sito web ufficiale il set completo, oppure un pacchetto personalizzato componibile.

A metà del 2013 Yahoo ha reso pubblica Pure.CSS, una struttura di base per lo sviluppo di front end per il web, che a ragione non solo vale come buona alternativa a Bootstrap, ma che può anche essere utilizzata in combinazione con il framework di Twitter. Pure.CSS si basa su SMACSS, acronimo per “Scalable and Modular Architecture for CSS”, un’architettura per CSS che fa sì che elementi ricorrenti come tabelle, pulsanti o formulari di contatto, siano divisi dal design di base (font, layout, ecc.) e che rispondano quindi alle proprie convenzioni. Per questo motivo all’interno del framework di Yahoo ogni modulo possiede un nome standard della classe con il prefisso “pure-” per la creazione regolare, come anche nomi di classi aggiuntivi per regole specifiche che valgono per i sotto-moduli. Ad esempio, un formulario di contatto in cui il codice è scritto tutto di seguito, può essere incluso in Pure.CSS inserendo la classe “pure-form” o anche la sotto-classe “pure-form-stacked”. Il framework per front end, scaricabile sia come variante responsive sia come variante non responsive, contiene le seguenti sezioni, che in forma compressa o zippata, hanno una dimensione di appena 4 KB (estratti diventano 16 KB):

• Base (base-min.css): framework di base, incluso il regolamento;

• Grids (grids-responsive-min.css): sistema a griglia fluida flessibile e responsive;

• Forms (forms-min.css/forms-nr-min.css): formulario di contatto;

• Buttons (buttons-min.css): diversi pulsanti;

• Tables (tables-min.css): tabelle;

• Menus (menus-min.css/menus-nr-min.css): menu.

Come anche le componenti di Bootstrap e molti altri framework per CSS, tutte le sezioni si strutturano sulla base del foglio di stile open source Normalize.css, il quale sostituisce lo stile standard degli elementi HTML con uno stile ottimizzato e adatto a tutti i tipi di browser. Rispetto al framework di front end di Twitter, l’appendice di Yahoo tuttavia non contiene applicazioni JavaScript, anche se naturalmente possono essere inserite di proprio pugno.  Pure.CSS più che un front end completo che deve essere adeguato alle proprie esigenze, è piuttosto un punto di partenza per il vostro progetto offrendo in questo modo anche una libertà decisamente più grande. Yahoo hosta il framework sul proprio Content Delivery Network (Yahoo CDN), accessibile liberamente, così che possiate includerlo indirizzandolo all’interno del campo <head-> del vostro progetto. Naturalmente potete anche scaricare Pure.CSS e hostarlo voi stessi. Il link aggiornato al CDN, come anche i file per il download, lo trovate sul sito web ufficiale purecss.io.

Nel 2013 il programmatore Jack Lukic ha reso pubblica la sua soluzione framework per lo sviluppo di front end con il nome di Semantic UI. Il punto centrale di questa raccolta di codice risiede nell’intenzione di facilitare la scrittura del codice HTML grazie a convenzioni semplici e intuitive per l’utente. A questo scopo Semantic UI contiene più di 3.000 classi semantiche di CSS, che sono facili da applicare e che sono pensate per l’ottimizzazione del processo di sviluppo. Mentre nel pacchetto di base di Bootstrap è presente un solo tema, Semantic UI offre più di 20 modelli di design diversi nella sua versione standard. Anche per il resto, l’offerta si presenta in maniera lievemente più complessa rispetto al framework di Twitter: oltre ai file essenziali CSS e JavaScript, il pacchetto di base dispone anche di una varietà di font, del gestore di pacchetto PHP Composer, del manager di dati web Bower, e infine del task runner per JavaScript Gulp. Le singole componenti sono ordinate nei seguenti sei campi:

• Globals: definizioni di stile sulla base di Normalize.css; fondamenta di tipografia e di progettazione;

• Elements: elementi generali del front end come pulsanti, icone, container, e così via;

• Collections: contenuti strutturali come il sistema a griglia, menu, tabelle o formulari di contatto;

• Views: elementi interattivi come campi di commento, bacheca per i messaggi, oppure banner pubblicitari;

• Modules: widgets come menu dropdown, pop-up, o checkbox;

• Behaviors: interfacce per la programmazione JavaScript.

Per principianti e utenti che provengono da altri sistemi, Semantic UI può inizialmente apparire estraneo e sicuramente è necessario un lungo periodo per entrare nelle dinamiche di questo framework. Alla fine, però, questo impegno viene ripagato, perché il codice HTML del vostro front end web è decisamente più intuitivo da leggere rispetto ad altri framework come ad esempio Twitter Bootstrap, cosa che può rivelarsi particolarmente utile durante le revisioni. Oltre che in CSS, Semantic UI è disponibile anche in una variante Less; nel frattempo esiste anche una variante Sass, tramite la quale, a questo punto, il framework semantico raggiunge lo stesso livello di Bootstrap. Uno svantaggio decisivo dell’alternativa a Bootstrap è il fatto che molte componenti sono dipendenti da JavaScript e non funzionano quindi senza linguaggio script. Potete scaricare Semantic UI o dalla sezione di download del sito web ufficiale, oppure inserite i file indirizzandoli sul Content Delivery Network JSDELIVR, o disponendo dei singoli codici snippet nel repository GitHub del framework.

UIkit è la soluzione open source per la programmazione front end dell’azienda di Amburgo YOOtheme, che può vantare una lunga esperienza nello sviluppo di applicazioni per il web come anche di temi per WordPress, Joomla, e del creatore di pagine web YOOtheme Pro, prodotto della stessa compagnia. La collezione di componenti HTML, CSS e JavaScript sottostà alla licenza libera MIT e può essere quindi utilizzata e modificata senza esitazioni.

Tutti gli snippet CSS esistono sia in una variante Less sia in una variante Sass, quindi gli adattamenti dei modelli di stile risultano freschi agli occhi di un programmatore esperto. Gli oltre 30 moduli Core dell’alternativa a Bootstrap, si basano, come già visto per altri rappresentanti e per il framework di Twitter, su Normalize.css, motivo per cui i browser attuali non hanno problemi nella rappresentazione di progetti web di UIkit.

Le componenti fondamentali sono suddivise nelle seguenti categorie:

• Defaults: la base per la normalizzazione degli elementi HTML, tramite cui vengono realizzate la compatibilità cross browser e alcune massime fondamentali dello stile;

• Layout: strumenti per la creazione del front end, come ad esempio: il sistema a griglia, box di contenuto, oppure utili classi CSS per contrassegnare contenuti che si ripetono;

• Navigations: tutti gli elementi che supportano il visitatore durante l’esplorazione della propria interfaccia web; tra questi esistono moduli per l’impaginazione (numerazione delle pagine) nonché le classiche barre di navigazione;

• Elements: stile per i blocchi di contenuto chiusi in sé, come tabelle, elenchi, formulari di contatto;

• Common: componenti che vengono usate normalmente all’interno dei contenuti, come pulsanti, icone, badge oppure animazioni;

• JavaScript: principalmente moduli costituiti da JavaScript per l’implementazione di elementi interattivi.

Per rendere i contenuti disponibili su diverse dimensioni di display, UIkit possiede diverse classi responsive. I breakpoints, ad esempio, sono predefiniti e permettono di adattare a piacimento qualsiasi tema grazie all’Online-Customizer: 1.200 pixel per schermi particolarmente grandi oppure 479 pixel per i piccoli display degli smartphone. Per evitare complicazioni con altri snippet o framework CSS, tutte le classi sono contraddistinte dal prefisso “uk-”. Anche se non sono integrati nel framework centrale, gli elementi CSS e JavaScript aggiuntivi e a scelta sono comunque necessari per la realizzazione di superfici web più complesse; ad esempio, per attrezzare un’area amministrativa servono elementi come il login, l’editor HTML e la funzione di caricamento di file.

Nonostante il notevole raggio d’azione delle funzioni a disposizione, la dimensione delle singole componenti, come anche dell’intero framework, risulta sorprendentemente ridotta. Il framework viene fornito con una documentazione molto completa che facilita un primo approccio, anche se su questo piano Bootstrap rimane comunque avanti, come anche per quanto riguarda la scelta di temi e l’offerta di tutorial.

Ciò nondimeno, per UIkit esistono già 1.500 fork su GitHub, dove è possibile trovare e scaricare tutti i moduli di framework per front end. Il pacchetto completo è disponibile per il download anche sulla homepage ufficiale. Tuttavia non si possono escludere dal download i moduli non desiderati, così che si è costretti a eliminarli dall’indice estratto solo una volta scaricato il pacchetto. 

Materialize è un framework per CSS che si basa sui principi del Material Design, introdotto nel 2015 da Google e utilizzato dallo stesso nella maggior parte delle sue app. Il concetto di design è costituito da un’idea di superfici simili a carte, che a livello grafico sono progettate in maniera principalmente minimalista: seguono quindi la linea estetica del cosiddetto “flat design”, ma prendono comunque vita grazie a numerose animazioni e ombre. Gli effetti di profondità che si vengono così a creare aiutano l’utente dell’interfaccia web a rilevare con facilità informazioni e elementi di interazione importanti. Lo User Interface framework con licenza MIT è stato sviluppato da Alvin Wang, Alan Chang, Alex Mark e Kevin Louie, quattro studenti della Carnegie Mellon University della Pennsylvania. L’alternativa a Bootstrap, che, come il framework di Twitter, possiede un sistema a griglia a dodici colonne, contiene diverse componenti CSS e JavaScript, oltre 700 ufficiali simboli Material Design in un font icona, come anche Roboto, il font standard del concetto di design di Google. Accanto ai consueti file CSS in versione normale e ridotta, con Materialize, come già con Bootstrap, potete ricorrere a file di origine SCSS scritti in Sass, che facilitano la propria superficie web. Indipendentemente da come ricade la scelta, avrete a disposizione ben 30 elementi:

• CSS: come già in Bootstrap e in altri framework UI, la funzione CSS elementare è rappresentata dal sistema a griglia responsive, il quale fornisce la base a un tipo di superficie web che funzioni su tutti i dispositivi. La griglia di Materialize contiene tre dimensioni per display predefinite, tra cui 600 pixel per dispositivi mobili, fino a 992 pixel per tablet e oltre 992 pixel per PC. Ulteriori snippet CSS sono, inoltre, una gamma di colori, costituita dai colori di base del Material Design, il già nominato font Roboto, e diverse classi, che in Materialize si chiamano “helpers” e che supportano l’attrezzamento dei contenuti.

• Components: si tratta di quelle componenti del framework per frontend delle quali necessiterete per la realizzazione di elementi di navigazione e campi interattivi. Oltre alle componenti tipiche come codici per l’inserimento di pagine, formulari di contatto, barre di navigazione, icone, trovate inoltre anche moduli, di fondamentale importanza per la realizzazione di concetti di Material Design. Di questi, ad esempio, fanno parte le “card”, i tipici box-oggetto di Google per la presentazione di contenuti, oppure i simbolici “chips”, con cui si rappresentano tag o contatti.

• JavaScript: in quanto ad applicazioni JavaScript, Materialize è senza dubbio tra le migliori alternative a Bootstrap. Che facciate apparire un’immagine in modalità di scorrimento, che aggiungiate finestre di dialogo interattive, che inseriate elementi a tendina o che vogliate ravvivare la superficie web con il cosiddetto effetto “parallax” (la parallasse è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione), non importa, perché avete sempre a vostra disposizione tutti gli snippet JavaScript che desiderate. In questo modo sarete attrezzati al meglio per la progettazione di una superficie web, che si contraddistingue per una elevata usabilità sia sui dispositivi mobili che sui computer fissi.

I file del progetto di Materialize potete scaricarli su GitHub oppure sulla homepage di materialize.css. Qui trovate anche i due template disponibili, “Starter” e “Parallax”, come anche il codice markup per la connessione a file di progetto tramite il Content Delivery Network cdnjs.

Le soluzioni alternative presentate nell’articolo hanno molti aspetti in comune con il framework di Twitter: in ogni caso, la componente centrale rimane il sistema a griglia, che si contraddistingue per flessibilità e una gran parte della realizzazione di superfici per il web di successo, adatte a tutti i tipi di dispositivo. Le misure minime e massime predefinite per le diverse dimensioni di display si differenziano sì da framework a framework, tuttavia come sviluppatore si ha molta libertà nell’adattamento. Questo non vale solamente per le griglie a rete, ma anche per i rimanenti elementi del CSS che in alcuni casi, tra l’altro, possono essere collegati in maniera molto intuitiva, cosa non sempre possibile su Bootstrap. Inoltre, esistono differenze nei sistemi delle classi delle alternative a Bootstrap, anche se Semantic UI spicca in maniera particolare. Al posto delle tipiche classi di CSS, il framework UI ha integrato più di 3.000 proprie classi semantiche con il suo stesso nome, che dovrebbero rendere la programmazione con il codice molto più intuitiva. La semplificazione nello scrivere il codice è garantita dalle numerose raccolte che operano tramite il supporto di linguaggi come Less a Sass; grazie a questi potete adattare senza complicazioni i fogli di stile della vostra interfaccia web, prima di tradurli nel consueto formato CSS così che possano essere letti e interpretati in maniera corretta dal browser Internet del visitatore. Soltanto Pure.CSS rinuncia a entrambi i preprocessori CSS, ma offre un interessante stimolo per l’utilizzo del CSS con l’architettura Scalable and Modular Architecture for CSS (SMACSS). Le diverse alternative a Bootstrap convincono ognuna per un aspetto differente, motivo per cui risulta difficile dichiarare un’unica soluzione vincitrice per la programmazione front end. Per questo motivo è raccomandabile che prendiate la vostra decisione innanzitutto sulla base delle esigenze del vostro progetto web, ponendovi le seguenti domande:

• Le componenti sono strutturate in maniera attraente?

• Il sistema a griglia offre le opzioni desiderate?

• Quanto è importante il supporto di versioni meno recenti dei browser?

• La varietà di moduli CSS e JavaScript corrisponde alle pretese?

• La dimensione del codice (compressa o non compressa) è proporzionale?

• Sono necessarie grandi libertà nell’adattamento del codice, e, se sì, quali possibilità offre il framework UI a riguardo?

• Che importanza date alla creazione di una grande community (sviluppo ulteriore, estensioni, template, forum, tutorial, e così via)?

Se oscillate tra numerose alternative a Bootstrap, è consigliabile dare un’occhiata ai manuali online. Qui i moduli vengono spiegati in maniera esaustiva, spesso includendo anche esempi di codice. Potete farvi un’idea ancora più precisa sulle possibilità che offrono i singoli rappresentanti, testandoli direttamente, nel qual caso il tool online Codeply può rappresentare un grande aiuto: qui testate infatti le componenti dei diversi framework UI direttamente sul browser, senza dover scaricare un singolo file.