Oggi, parliamo di un’argomento importante e sempre più in voga tra web designer: i framework css per realizzare siti web responsive.
Ogni web designer che si rispetti, perde sempre un sacco di tempo a sistemare e creare componenti e interfacce grafiche che siano responsive, cioè adatte ad ogni dispositivo..Dal desktop fino ad arrivare allo smartphone.
Quando si è in queste situazioni, si può continuare ad utilizzare un CSS puro oppure ricorrere ai famosi framework css.
Uno dei più famosi, se non il più famoso è Bootstrap ma ce ne sono molti altri..Magari meno conosciuti ma sempre utili.
Cosa è un framework?
Prima di elencare i framework CSS, meglio spiegare cosa sono e a cosa servono.
Non sono altro che dei “pacchetti” con file CSS e Javascript già pronti all’utilizzo, e abbinandoli ai file HTML si possono creare interfacce grafiche moderne in pochi istanti, e con licenze free.
Perchè con i framework css si trovano dei componenti e widget già pronti, nel caso dei framework più famosi si trovano facilmente i siti ufficiali in cui vengono inseriti tutti gli snippets solo da copiare ed incollare…ed il lavoro è già fatto.
Poi chiaramente, un bravo designer non si può affidare solo ed esclusivamente a questi strumenti ma anche sviluppare e realizzare. la brand guidelines del progetto.
Inoltre dispongono di una griglia con colonne per gestire al meglio il design dei progetti per siti web responsive e ben navigabili su tablet e smartphone.
Il vantaggio non è da poco, soprattutto se si è designers che si vogliono focalizzare di più sulla UI e la UX senza spendere troppo tempo a realizzare file HTML e CSS.
Infine questi pacchetti offrono dei file dalle dimensioni abbastanza ridotte e questo aiuta la velocità di caricamento del sito, praticamente ogni framework ha i file css in versione ridotta e una in versione più estesa.
Tuttavia se si vuole aggiungere una modifica sostanziale ai componenti, consiglio sempre di utilizzare un foglio CSS separato per non andare a fare modifiche al framework css.
Perchè molte volte questi file mettono a disposizioni molti componenti, colori e widgets e in alcuni casi ritrovare il pezzo di codice modificato diventa difficile, se non si utilizzano i commenti in modo preciso.
Quali sono gli svantaggi
Premesso, che i vantaggi ad utilizzare questi pacchetti sono molti, ci sono anche degli svantaggi non indifferenti se si è dei web designer attenti.
Prima cosa è che continuando ad utilizzare i framework css, si rischia creare dei layout sempre identici a due, tre o quattro colonne ma sempre simili tra di loro.
Infatti, con Bootstrap e company si ragiona a ‘blocchi’ e alternando righe da 2 o 3 colonne si riesce a dare armonia ma alla lunga si rischia di diventare monotoni nella realizzazione dei design.
Quindi bisogna utilizzare certi strumenti ma con buon senso, senza esagerare perchè se no la cosa può portare dei svantaggi.
Altra cosa a sfavore è, come detto, che alcuni framework lasciano usufruire di tanti componenti grafici pre-confenzionati, quindi possono presentare fogli di stile molto lunghi e non sempre molto comprensibili.
Tutto sommato, ci sono tanti lati positivi nell’utilizzare questi strumenti per facilitare lo sviluppo web senza intoppare in errori di scrittura del codice.
L’elenco dei framework
Ecco arrivati al pezzo più importante dell’articolo cioè l’elenco dei framework css più famosi e utilizzati, ma non solo…Anche quelli che non sono utilizzati da un’ampia community ma che hanno componenti e design moderni e interessanti
Questi pacchetti, oltre a offrire un gran numero di elementi grafici, mettono a disposizione delle palette colori molto luminose che possono rendere il progetto uniforme e senza una palette con molti colori che mettono in difficoltà l’usabilità del sito.
Bootstrap
L’elenco poteva non partire da Bootstrap?
Assolutamente no, è il framework CSS per eccellenza ed in rete si possono trovare tantissimi siti web realizzati con il grid layout di Bootstrap, e probabilmente ci vorrebbe un’articolo intero solo per esso.
I fondatori di Bootstrap sono degli sviluppatori di Twitter, e già qui si può capire quanto è stato ben sviluppato e come sia costantemente aggiornato.
Bootstrap mette a disposizione tantissimi componenti, dai più piccoli ai più grandi per realizzare un’interfaccia grafica totalmente responsive e ben navigabile anche su smartphone.
Questo framework è arrivato alla versione 5.0 in cui sono stati integrati tantissime novità.
Come l’introduzione di un’intero pacchetto di icone che rendono il sito e le app ancora più moderne e belle da vedere.
Oppure il fatto che ormai la versione 5.0 non utilizza più la proprietà flexbox per organizzare le colonne dei layout, ma utilizza la proprietà grid.
Inoltre ha aggiornato il design di alcuni componenti grafici come gli input e i textarea che fanno parte del modulo sui form, che presentano anche i floating labels come negli input delle prime versioni del Material Design.
Hanno aggiunto un bel componente per creare accordion più precisi e dettagliati rispettop alle versioni precedenti.
Un’altra novità importante è che Boostrap non include più Jquery, come nelle prime versioni.
Questo perchè molti effetti e animazioni ormai si possono realizzare con html e css che presentano sempre più proprietà per dare più dinamicità al sito web.
La rimozione di Jquery rende ancora più snelli i file di Bootstrap e quindi adesso si potranno realizzare interfacce ancora più scattanti e che non creano attesa ai visitatori che devono switchare da una sezione all’altra del sito.
Foundation
Il secondo framework css tra i più famosi è Foundation che può vantare una buonissima community che aggiorna documentazione e framework con frequenza.
Anche qui, come altri pacchetti, troviamo il grid layout per gestione di colonne che si adattano a seconda dei breakpoint css e del dispositivo.
Foundation usa un’approccio mobile first e si basa sulla guida di stile ZURB.
Sì…ma cosa è ZURB?
ZURB è una design company che aiuta i più grandi marchi a creare dei prodotti digitali dal design chiaro e da buona ‘usabilità.
Questa company poi ha progettato e messo online Foundation che in, pochi anni, è divantato secondo solo a Bootstrap-
Si può installare Foundation attraverso NPM o semplicemente collegando il foglio di stile con i nostri file html, da li si comincia subito a sviluppare il proprio progetto utilizzando html e css.
Anche qui, come con Bootstrap, si ha di fronte un vero e proprio pacchetto con componenti grafici, navbar, widgets già fatti e pronti ad essere inseriti nella pagina.
Come detto, Foundation mette a disposizione un grid layout per costruire la propria pagina responsive e adattabile a tutti i dispositivi.
La differenza è che rispetto a Bootstrap, viene ancora gestita con la proprietà css flexbox, che comunque è sempre un’ottima sioluzione.
Inoltre Foundation mette a disposizione uno starter project facilmente installabile sempre con NPM, cosa vuol dire questo?
Sermplice…Che si può già avere a disposizione un template con una struttura base, già pronto per essere personalizzato secondo i propri bisogni.
CXon gli innumerevoli widget e componenti come i bottoni, badge, form, label, navbar, elementi tipografici, tabelle, sliver, oggetti per media e tanto altro..
Materialize
Personalmente, non sono un fan del Material Design, il design system di Google ma è un trends sempre in voga e può sempre dare un design differente rispetto ai soliti progetti con design minimal.
Non fraintendetemi, è un design system creato da designers di Google ma caratterizzato da ombre e animazioni che non sempre aiutano la navigazione.
Detto ciò, negli ultimi anni Google ha cercato di migliorare sempre di più queste finezze grafiche ed il design system è in continuo aggiornamento e miglioramento.
E per i designers che amano il design targato Google, il framework Materialize può essere molto d’aiuto.
Infatti scaricando Materialize, si hanno a disposizione il solito layout grid responsive e tantissimi componenti grafici caratterizzati dal Material Design.
Componenti come le chips, i float button, le cards che ritrovi in app come Gmail, Google Drive ecc..
Materialize mette a disposizione una versione per le app mobile, oltre ai temi starter sia fee e sia premium per chi volesse partire con una struttura già ‘pre-confezionata’ e velocizzare il flusso di lavoro.
Lati negativi purtroppo è che il framework non viene aggiornato frequentemente e il numero di componenti è minore dei sopra citati Bootstrap o Foundation.
Il framework non è gestito da Google, ma da autori esterni che comunque hanno creato componenti con un bel design.
Bulma
Passiamo a Bulma che è un’altro framework CSS che è sempre stato aggiornato negli anni mantenendo sempre un design pulito e moderno.
Gli autori di Bulma hanno realizzato un framework modulare, responsive, moderno e open source.
Quindi completamente gratuito come i competitor Bootstrap e Foundation.
Per partire subito, è consigliabile installare Bulma con NPM, e se non si è pratico con NPM, si può sempre collegare il link CDN al proprio file html.
Successivamente, si può guardare uno dei tantissimi tutorial presenti sul sito ufficiale, oppure dare un’occhiata alla guida ufficiale.
Bulma parte dagli elementi ‘base’ come bottoni, progress bar, label, form input, headline per titoli, tabelle.
Fino ad arrivare a componenti più complessi come navbar, dropdown, card, pagination, tab e molto altro.
Rispetto a Foundation e Bootstrap, questo framework utilizza un’altra nomenclatura per le classi css del layout grid.
Questo può agevolare la comprensione di chi legge il codice, ma alla lunga se si utilizzano tante classe per ogni elemento, si rischia di creare elementi con un elenco lungo delle classi.
Detto questo, Bulma si posiziona come un framework css facile da utilizzare e con il quale si può creare interfacce grafiche moderne e facilmente navigabili.
Miligram
Per ultimo, cito Miligram che rispetto ai framework citati precedentemente, presenta meno componenti grafici.
Ma c’è un motivo..Infatti Miligram non si presenta come un framework css per User Interface ma fornisce una serie di classi che costituiscono una buona base per una configurazione minimale e pulita del nostro design.
Anche qui, si installa attraverso NPM oppure collegando il foglio di stile Miligram ai nostri file html con il tag <link>.
Come si può notare dalla guida sul sito ufficiale, ci sono i componenti più utilizzati come i foerm, gli input, i bottoni, le liste.
Ma non elementi come la navbar, gli accordion o le cards..Tanto per fare degli esempi.
Come detto, hanno un design minimal e utilizzano una palette composta da pochi colori.
Ma che ci permettono di creare grafiche leggere, chiare e che vengono incontro all’usabilità.
E’ un framework css che pesa pochissimo..In total 2kb, perciò le pagine dei progetti risulteranno più veloci nel caricamento.
Poi, se si vuole realizzare delle UI più sofisticate bisogna ricorrere a un nostro foglio di stile oppure aggiungere un’altro framework css che ha a disposizione più componenti.
Conclusioni
In questo articolo, ho descritto i framework css più utilizzati come Bootstrap, ma anche quelli meno conosciuti ma che possono tornare utili come Miligram.
Come si può notare, c’è un ampio ventaglio di scelta..E non ho descritto tutti i framework.
Perchè, cercando in internet se ne trovano sicuramente altri.
Ma ricordiamoci sempre che questi strumenti devono essere utilizzati con buonsenso, perchè si rischia sempre di cadere nel tranello di creare progetti dal design simile tra di loro.
E questo..alla lunga..Non aiuta a sviluppare un portfolio lavori realmente creativo e che possa essere d’impatto agli occhi di chi lo guarda.