Al­ter­na­ti­ve a Bootstrap: una pa­no­ra­mi­ca 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 pro­get­ta­zio­ne di modelli per la creazione di siti e ap­pli­ca­zio­ni, si troverà a dover fron­teg­gia­re diverse sfide: in­nan­zi­tut­to l’in­ter­fac­cia dovrà possedere un’estetica adeguata ma, al contempo, non dovrà tra­la­scia­re il fattore dell’usabilità. Siccome og­gi­gior­no esiste una varietà piuttosto grande di di­spo­si­ti­vi e di browser at­tra­ver­so i quali gli utenti navigano il web, gli elementi visivi e tecnici scelti devono ne­ces­sa­ria­men­te fun­zio­na­re su ogni tipo di piat­ta­for­ma. In più, anche l’ac­ces­si­bi­li­tà e una buona base SEO sono elementi as­so­lu­ta­men­te da non tra­scu­ra­re durante la pro­gram­ma­zio­ne front end.

Per non dover iniziare da zero durante lo sviluppo di un’in­ter­fac­cia web, molti pro­gram­ma­to­ri si servono di co­sid­det­ti “UI-framework” (User Interface framework), i quali vanno ad adattarsi all’in­ter­fac­cia utente. In questo processo la scelta ricade spesso su Bootstrap, pro­get­ta­to da Twitter, le cui com­po­nen­ti sono ot­ti­miz­za­te per tutti i di­spo­si­ti­vi mobili e i browser esistenti, e che possono quindi essere adeguate alle proprie esigenze senza problemi. Tuttavia l’ampia dif­fu­sio­ne della piat­ta­for­ma fa sì che esistano molti siti web in rete che sono stati creati con il codice standard di Bootstrap e che quindi finiscono per as­so­mi­gliar­si tra loro. Un piccolo punto a sfavore è inoltre rap­pre­sen­ta­to dalla com­ples­si­tà del framework front end, il quale ricorre a molto CSS e Ja­va­Script, rendendo di con­se­guen­za il lin­guag­gio di markup HTML più vasto: questo può avere con­se­guen­ze negative, ad esempio sul tempo di ca­ri­ca­men­to del progetto web. È sì possibile scaricare file script e CSS ridotti che con­ten­go­no solamente le com­po­nen­ti Bootstrap ne­ces­sa­rie, tuttavia a questo scopo è ne­ces­sa­rio af­fron­ta­re l’argomento più da vicino. In questo modo, sem­pli­ci­tà e risparmio di tempo, ovvero i fattori che do­vreb­be­ro essere legati all’utilizzo di framework, vanno in parte persi. Ad alcuni svi­lup­pa­to­ri, in generale, l’utilizzo di UI framework potrebbe non piacere, motivo per cui risulta allora sensato prendere in con­si­de­ra­zio­ne delle al­ter­na­ti­ve a Bootstrap: un’impresa non meno difficile, vista l’enorme scelta a di­spo­si­zio­ne.

In seguito verranno pre­sen­ta­ti cinque diversi front end framework che possono essere uti­liz­za­ti al posto di Twitter Bootstrap e che per­met­to­no di svi­lup­pa­re front end per il web completi e fun­zio­na­li. Saranno il­lu­stra­ti i relativi vantaggi e svantaggi di ciascun framework, come anche le dif­fe­ren­ze rispetto a Bootstrap e la vastità d’azione che pos­sie­do­no le raccolte di codice, così da poter capire a quale tipo di sviluppo si adattano meglio. Infine verrà ana­liz­za­to come ef­fet­ti­va­men­te funziona lo sviluppo con ciascuna al­ter­na­ti­va a bootstrap.

Il framework modulare dell’azienda Foun­da­tion ha origine in una guida di lin­guag­gio di stile, che l’agenzia di web design ZURB ini­zial­men­te usava solo per i progetti dei clienti. In seguito, ZURB ha iniziato a combinare e pub­bli­ca­re le numerose com­po­nen­ti HTML-, CSS- e Ja­va­Script nel framework open source. La parte centrale è co­sti­tui­ta da un layout a griglia fluida suddiviso in dodici colonne, il quale rende possibile la con­fi­gu­ra­zio­ne di un layout re­spon­si­ve che si adatta au­to­ma­ti­ca­men­te alle diverse di­men­sio­ni del display e alle diverse ri­so­lu­zio­ni dei di­spo­si­ti­vi finali. Accanto al sistema a griglia, Foun­da­tion offre anche i seguenti modelli:

• Slider

• Pulsanti

• Ti­po­gra­fia

• Barre di menu e vari menu

• Con­te­ni­to­ri di media

• Classi “float” e “vi­si­bi­li­ty” integrate

Come già a partire dalla versione 4 di Bootstrap, Foun­da­tion si basa su Sass, un lin­guag­gio di stile che sem­pli­fi­ca in maniera si­gni­fi­ca­ti­va la creazione e l’ela­bo­ra­zio­ne di file CSS; tuttavia al framework di ZURB manca il supporto di Less (ugual­men­te un lin­guag­gio di stile), offerto invece da Bootstrap. Mentre, per quanto riguarda la scelta di plug-in Ja­va­Script e snippet CSS, si ri­scon­tra­no a malapena delle dif­fe­ren­ze tra i due framework, Foun­da­tion non è invece par­ti­co­lar­men­te fornito di template; in più, c’è anche un livello basso di supporto di altre piat­ta­for­me.

Comunque sia, il framework di ZURB supera de­ci­sa­men­te la soluzione di Twitter re­la­ti­va­men­te all’in­di­vi­dua­li­tà di front end svi­lup­pa­ti: il codice CSS che vi sta alla base assicura l’accesso a un design compatto, che può essere adeguato a pia­ci­men­to senza com­pli­ca­zio­ni. Alcune classi sono, di­ver­sa­men­te da Bootstrap, di­ret­ta­men­te incluse, senza che dobbiate ag­giun­ger­le in seguito. Un ulteriore vantaggio: ZURB offre diversi corsi, nonché as­si­sten­za personale al vostro progetto front end, senza di­men­ti­ca­re, infine, una versione speciale del framework per la creazione di new­slet­ter via mail.

Se dunque intendete uti­liz­za­re Foun­da­tion per lo sviluppo della vostra in­ter­fac­cia web, avete la pos­si­bi­li­tà di scaricare gra­tui­ta­men­te dal sito web ufficiale il set completo, oppure un pacchetto per­so­na­liz­za­to com­po­ni­bi­le.

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 al­ter­na­ti­va a Bootstrap, ma che può anche essere uti­liz­za­ta in com­bi­na­zio­ne con il framework di Twitter. Pure.CSS si basa su SMACSS, acronimo per “Scalable and Modular Ar­chi­tec­tu­re for CSS”, un’ar­chi­tet­tu­ra per CSS che fa sì che elementi ri­cor­ren­ti come tabelle, pulsanti o formulari di contatto, siano divisi dal design di base (font, layout, ecc.) e che ri­spon­da­no quindi alle proprie con­ven­zio­ni. 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 ag­giun­ti­vi per regole spe­ci­fi­che che valgono per i sotto-moduli. Ad esempio, un for­mu­la­rio 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, sca­ri­ca­bi­le sia come variante re­spon­si­ve sia come variante non re­spon­si­ve, contiene le seguenti sezioni, che in forma compressa o zippata, hanno una di­men­sio­ne di appena 4 KB (estratti diventano 16 KB):

• Base (base-min.css): framework di base, incluso il re­go­la­men­to;

• Grids (grids-re­spon­si­ve-min.css): sistema a griglia fluida fles­si­bi­le e re­spon­si­ve;

• Forms (forms-min.css/forms-nr-min.css): for­mu­la­rio 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 com­po­nen­ti di Bootstrap e molti altri framework per CSS, tutte le sezioni si strut­tu­ra­no sulla base del foglio di stile open source Normalize.css, il quale so­sti­tui­sce lo stile standard degli elementi HTML con uno stile ot­ti­miz­za­to e adatto a tutti i tipi di browser. Rispetto al framework di front end di Twitter, l’appendice di Yahoo tuttavia non contiene ap­pli­ca­zio­ni Ja­va­Script, anche se na­tu­ral­men­te 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à de­ci­sa­men­te più grande. Yahoo hosta il framework sul proprio Content Delivery Network (Yahoo CDN), ac­ces­si­bi­le li­be­ra­men­te, così che possiate in­clu­der­lo in­di­riz­zan­do­lo all’interno del campo <head-> del vostro progetto. Na­tu­ral­men­te potete anche scaricare Pure.CSS e hostarlo voi stessi. Il link ag­gior­na­to al CDN, come anche i file per il download, lo trovate sul sito web ufficiale purecss.io.

Nel 2013 il pro­gram­ma­to­re 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’in­ten­zio­ne di fa­ci­li­ta­re la scrittura del codice HTML grazie a con­ven­zio­ni semplici e intuitive per l’utente. A questo scopo Semantic UI contiene più di 3.000 classi se­man­ti­che di CSS, che sono facili da applicare e che sono pensate per l’ot­ti­miz­za­zio­ne 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 lie­ve­men­te più complessa rispetto al framework di Twitter: oltre ai file es­sen­zia­li CSS e Ja­va­Script, 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 Ja­va­Script Gulp. Le singole com­po­nen­ti sono ordinate nei seguenti sei campi:

• Globals: de­fi­ni­zio­ni di stile sulla base di Normalize.css; fon­da­men­ta di ti­po­gra­fia e di pro­get­ta­zio­ne;

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

• Col­lec­tions: contenuti strut­tu­ra­li come il sistema a griglia, menu, tabelle o formulari di contatto;

• Views: elementi in­te­rat­ti­vi come campi di commento, bacheca per i messaggi, oppure banner pub­bli­ci­ta­ri;

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

• Behaviors: in­ter­fac­ce per la pro­gram­ma­zio­ne Ja­va­Script.

Per prin­ci­pian­ti e utenti che pro­ven­go­no da altri sistemi, Semantic UI può ini­zial­men­te apparire estraneo e si­cu­ra­men­te è ne­ces­sa­rio 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 è de­ci­sa­men­te più intuitivo da leggere rispetto ad altri framework come ad esempio Twitter Bootstrap, cosa che può rivelarsi par­ti­co­lar­men­te utile durante le revisioni. Oltre che in CSS, Semantic UI è di­spo­ni­bi­le 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 svan­tag­gio decisivo dell’al­ter­na­ti­va a Bootstrap è il fatto che molte com­po­nen­ti sono di­pen­den­ti da Ja­va­Script e non fun­zio­na­no quindi senza lin­guag­gio script. Potete scaricare Semantic UI o dalla sezione di download del sito web ufficiale, oppure inserite i file in­di­riz­zan­do­li sul Content Delivery Network JSDELIVR, o di­spo­nen­do dei singoli codici snippet nel re­po­si­to­ry GitHub del framework.

UIkit è la soluzione open source per la pro­gram­ma­zio­ne front end dell’azienda di Amburgo YOOtheme, che può vantare una lunga espe­rien­za nello sviluppo di ap­pli­ca­zio­ni per il web come anche di temi per WordPress, Joomla, e del creatore di pagine web YOOtheme Pro, prodotto della stessa compagnia. La col­le­zio­ne di com­po­nen­ti HTML, CSS e Ja­va­Script sottostà alla licenza libera MIT e può essere quindi uti­liz­za­ta e mo­di­fi­ca­ta senza esi­ta­zio­ni.

Tutti gli snippet CSS esistono sia in una variante Less sia in una variante Sass, quindi gli adat­ta­men­ti dei modelli di stile risultano freschi agli occhi di un pro­gram­ma­to­re esperto. Gli oltre 30 moduli Core dell’al­ter­na­ti­va a Bootstrap, si basano, come già visto per altri rap­pre­sen­tan­ti e per il framework di Twitter, su Normalize.css, motivo per cui i browser attuali non hanno problemi nella rap­pre­sen­ta­zio­ne di progetti web di UIkit.

Le com­po­nen­ti fon­da­men­ta­li sono suddivise nelle seguenti categorie:

• Defaults: la base per la nor­ma­liz­za­zio­ne degli elementi HTML, tramite cui vengono rea­liz­za­te la com­pa­ti­bi­li­tà cross browser e alcune massime fon­da­men­ta­li 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 con­tras­se­gna­re contenuti che si ripetono;

• Na­vi­ga­tions: tutti gli elementi che sup­por­ta­no il vi­si­ta­to­re durante l’esplo­ra­zio­ne della propria in­ter­fac­cia web; tra questi esistono moduli per l’im­pa­gi­na­zio­ne (nu­me­ra­zio­ne delle pagine) nonché le classiche barre di na­vi­ga­zio­ne;

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

• Common: com­po­nen­ti che vengono usate nor­mal­men­te all’interno dei contenuti, come pulsanti, icone, badge oppure ani­ma­zio­ni;

• Ja­va­Script: prin­ci­pal­men­te moduli co­sti­tui­ti da Ja­va­Script per l’im­ple­men­ta­zio­ne di elementi in­te­rat­ti­vi.

Per rendere i contenuti di­spo­ni­bi­li su diverse di­men­sio­ni di display, UIkit possiede diverse classi re­spon­si­ve. I brea­k­poin­ts, ad esempio, sono pre­de­fi­ni­ti e per­met­to­no di adattare a pia­ci­men­to qualsiasi tema grazie all’Online-Cu­sto­mi­zer: 1.200 pixel per schermi par­ti­co­lar­men­te grandi oppure 479 pixel per i piccoli display degli smart­pho­ne. Per evitare com­pli­ca­zio­ni con altri snippet o framework CSS, tutte le classi sono con­trad­di­stin­te dal prefisso “uk-”. Anche se non sono integrati nel framework centrale, gli elementi CSS e Ja­va­Script ag­giun­ti­vi e a scelta sono comunque necessari per la rea­liz­za­zio­ne di superfici web più complesse; ad esempio, per at­trez­za­re un’area am­mi­ni­stra­ti­va servono elementi come il login, l’editor HTML e la funzione di ca­ri­ca­men­to di file.

No­no­stan­te il notevole raggio d’azione delle funzioni a di­spo­si­zio­ne, la di­men­sio­ne delle singole com­po­nen­ti, come anche dell’intero framework, risulta sor­pren­den­te­men­te ridotta. Il framework viene fornito con una do­cu­men­ta­zio­ne 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 è di­spo­ni­bi­le per il download anche sulla homepage ufficiale. Tuttavia non si possono escludere dal download i moduli non de­si­de­ra­ti, così che si è costretti a eli­mi­nar­li dall’indice estratto solo una volta scaricato il pacchetto. 

Ma­te­ria­li­ze è un framework per CSS che si basa sui principi del Material Design, in­tro­dot­to nel 2015 da Google e uti­liz­za­to dallo stesso nella maggior parte delle sue app. Il concetto di design è co­sti­tui­to da un’idea di superfici simili a carte, che a livello grafico sono pro­get­ta­te in maniera prin­ci­pal­men­te mi­ni­ma­li­sta: seguono quindi la linea estetica del co­sid­det­to “flat design”, ma prendono comunque vita grazie a numerose ani­ma­zio­ni e ombre. Gli effetti di pro­fon­di­tà che si vengono così a creare aiutano l’utente dell’in­ter­fac­cia web a rilevare con facilità in­for­ma­zio­ni e elementi di in­te­ra­zio­ne im­por­tan­ti. Lo User Interface framework con licenza MIT è stato svi­lup­pa­to da Alvin Wang, Alan Chang, Alex Mark e Kevin Louie, quattro studenti della Carnegie Mellon Uni­ver­si­ty della Penn­syl­va­nia. L’al­ter­na­ti­va a Bootstrap, che, come il framework di Twitter, possiede un sistema a griglia a dodici colonne, contiene diverse com­po­nen­ti CSS e Ja­va­Script, 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 Ma­te­ria­li­ze, come già con Bootstrap, potete ricorrere a file di origine SCSS scritti in Sass, che fa­ci­li­ta­no la propria su­per­fi­cie web. In­di­pen­den­te­men­te da come ricade la scelta, avrete a di­spo­si­zio­ne ben 30 elementi:

• CSS: come già in Bootstrap e in altri framework UI, la funzione CSS ele­men­ta­re è rap­pre­sen­ta­ta dal sistema a griglia re­spon­si­ve, il quale fornisce la base a un tipo di su­per­fi­cie web che funzioni su tutti i di­spo­si­ti­vi. La griglia di Ma­te­ria­li­ze contiene tre di­men­sio­ni per display pre­de­fi­ni­te, tra cui 600 pixel per di­spo­si­ti­vi mobili, fino a 992 pixel per tablet e oltre 992 pixel per PC. Ulteriori snippet CSS sono, inoltre, una gamma di colori, co­sti­tui­ta dai colori di base del Material Design, il già nominato font Roboto, e diverse classi, che in Ma­te­ria­li­ze si chiamano “helpers” e che sup­por­ta­no l’at­trez­za­men­to dei contenuti.

• Com­po­nen­ts: si tratta di quelle com­po­nen­ti del framework per frontend delle quali ne­ces­si­te­re­te per la rea­liz­za­zio­ne di elementi di na­vi­ga­zio­ne e campi in­te­rat­ti­vi. Oltre alle com­po­nen­ti tipiche come codici per l’in­se­ri­men­to di pagine, formulari di contatto, barre di na­vi­ga­zio­ne, icone, trovate inoltre anche moduli, di fon­da­men­ta­le im­por­tan­za per la rea­liz­za­zio­ne di concetti di Material Design. Di questi, ad esempio, fanno parte le “card”, i tipici box-oggetto di Google per la pre­sen­ta­zio­ne di contenuti, oppure i simbolici “chips”, con cui si rap­pre­sen­ta­no tag o contatti.

• Ja­va­Script: in quanto ad ap­pli­ca­zio­ni Ja­va­Script, Ma­te­ria­li­ze è senza dubbio tra le migliori al­ter­na­ti­ve a Bootstrap. Che facciate apparire un’immagine in modalità di scor­ri­men­to, che ag­giun­gia­te finestre di dialogo in­te­rat­ti­ve, che inseriate elementi a tendina o che vogliate ravvivare la su­per­fi­cie web con il co­sid­det­to effetto “parallax” (la pa­ral­las­se è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di os­ser­va­zio­ne), non importa, perché avete sempre a vostra di­spo­si­zio­ne tutti gli snippet Ja­va­Script che de­si­de­ra­te. In questo modo sarete at­trez­za­ti al meglio per la pro­get­ta­zio­ne di una su­per­fi­cie web, che si con­trad­di­stin­gue per una elevata usabilità sia sui di­spo­si­ti­vi mobili che sui computer fissi.

I file del progetto di Ma­te­ria­li­ze potete sca­ri­car­li su GitHub oppure sulla homepage di ma­te­ria­li­ze.css. Qui trovate anche i due template di­spo­ni­bi­li, “Starter” e “Parallax”, come anche il codice markup per la con­nes­sio­ne a file di progetto tramite il Content Delivery Network cdnjs.

Le soluzioni al­ter­na­ti­ve pre­sen­ta­te nell’articolo hanno molti aspetti in comune con il framework di Twitter: in ogni caso, la com­po­nen­te centrale rimane il sistema a griglia, che si con­trad­di­stin­gue per fles­si­bi­li­tà e una gran parte della rea­liz­za­zio­ne di superfici per il web di successo, adatte a tutti i tipi di di­spo­si­ti­vo. Le misure minime e massime pre­de­fi­ni­te per le diverse di­men­sio­ni di display si dif­fe­ren­zia­no sì da framework a framework, tuttavia come svi­lup­pa­to­re si ha molta libertà nell’adat­ta­men­to. 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 dif­fe­ren­ze nei sistemi delle classi delle al­ter­na­ti­ve a Bootstrap, anche se Semantic UI spicca in maniera par­ti­co­la­re. Al posto delle tipiche classi di CSS, il framework UI ha integrato più di 3.000 proprie classi se­man­ti­che con il suo stesso nome, che do­vreb­be­ro rendere la pro­gram­ma­zio­ne con il codice molto più intuitiva. La sem­pli­fi­ca­zio­ne 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 com­pli­ca­zio­ni i fogli di stile della vostra in­ter­fac­cia web, prima di tradurli nel consueto formato CSS così che possano essere letti e in­ter­pre­ta­ti in maniera corretta dal browser Internet del vi­si­ta­to­re. Soltanto Pure.CSS rinuncia a entrambi i pre­pro­ces­so­ri CSS, ma offre un in­te­res­san­te stimolo per l’utilizzo del CSS con l’ar­chi­tet­tu­ra Scalable and Modular Ar­chi­tec­tu­re for CSS (SMACSS). Le diverse al­ter­na­ti­ve a Bootstrap con­vin­co­no ognuna per un aspetto dif­fe­ren­te, motivo per cui risulta difficile di­chia­ra­re un’unica soluzione vin­ci­tri­ce per la pro­gram­ma­zio­ne front end. Per questo motivo è rac­co­man­da­bi­le che prendiate la vostra decisione in­nan­zi­tut­to sulla base delle esigenze del vostro progetto web, ponendovi le seguenti domande:

• Le com­po­nen­ti sono strut­tu­ra­te in maniera attraente?

• Il sistema a griglia offre le opzioni de­si­de­ra­te?

• Quanto è im­por­tan­te il supporto di versioni meno recenti dei browser?

• La varietà di moduli CSS e Ja­va­Script cor­ri­spon­de alle pretese?

• La di­men­sio­ne del codice (compressa o non compressa) è pro­por­zio­na­le?

• Sono ne­ces­sa­rie grandi libertà nell’adat­ta­men­to del codice, e, se sì, quali pos­si­bi­li­tà offre il framework UI a riguardo?

• Che im­por­tan­za date alla creazione di una grande community (sviluppo ulteriore, esten­sio­ni, template, forum, tutorial, e così via)?

Se oscillate tra numerose al­ter­na­ti­ve a Bootstrap, è con­si­glia­bi­le dare un’occhiata ai manuali online. Qui i moduli vengono spiegati in maniera esaustiva, spesso in­clu­den­do anche esempi di codice. Potete farvi un’idea ancora più precisa sulle pos­si­bi­li­tà che offrono i singoli rap­pre­sen­tan­ti, te­stan­do­li di­ret­ta­men­te, nel qual caso il tool online Codeply può rap­pre­sen­ta­re un grande aiuto: qui testate infatti le com­po­nen­ti dei diversi framework UI di­ret­ta­men­te sul browser, senza dover scaricare un singolo file.