Bootstrap è ovunque, ma non è sempre lo strumento giusto per il lavoro. Ecco alcune ottime alternative!
Se controlli a caso il codice sorgente del front-end di un sito Web in questi giorni, è probabile che troverai Bootstrap sotto. Siamo diventati tutti così abituati a concetti come container-fluid, row, col-sm-6, ecc., che è difficile immaginare che sia possibile qualsiasi altro stile di sviluppo del front-end. E così, quando dobbiamo costruire il prossimo progetto, raggiungiamo Bootstrap inconsciamente. Detto questo, la popolarità non rende Bootstrap adatto a tutti i progetti e le esigenze.
Infatti, per frontend davvero snelli, caricando tutti i file CSS Bootstrap e JS può causare un grosso gonfiore.
Questo articolo ha due scopi:
Penso che la parte della spiegazione sia davvero importante perché nella maggior parte dei casi le persone non si rendono nemmeno conto di avere un problema o che stanno rendendo il loro lavoro più difficile raccogliendo Bootstrap. Infine, tieni presente che questo non è in alcun modo un post anti-Bootstrap. Adoro Bootstrap 4 e lo uso ogni volta che posso. Ma poi sono uno sviluppatore individuale che deve pensare di usare la soluzione più popolare; inoltre, non sono uno sviluppatore dell’interfaccia utente di per sé, quindi non mi preoccupo di troppe cose quando costruisco i miei front-end.
E con questo, diamo un’occhiata a quali alternative abbiamo.
Sommario:
Griglia Flexbox
Pensaci per un minuto: il motivo principale per cui hai iniziato a utilizzare Bootstrap e lo stai ancora utilizzando è il suo sistema a griglia. Certo, ci è voluto un po’ per abituarsi alle classi row, col-md-6, ecc., ma ora è naturale pensare a un layout in termini di righe, colonne, offset, ecc.
E se sei onesto con te stesso, scoprirai che tutto il resto in Bootstrap è un po’ complicato su cui lavorare. Ci sono un sacco di classi da ricordare, sia che tu stia facendo moduli, navigazione, pulsanti, tabelle o qualsiasi altra cosa. Se sei come me, non ti sei ancora abituato a tutte le classi ea quello che fanno, e spesso usi Bootstrap solo per la griglia e scrivi tu stesso tutti gli altri CSS.
Se sì, potresti fare molto meglio con Griglia Flexbox.
La Flexbox Grid, come suggerisce il nome, è un sistema a griglia basato sul CSS Flexbox proprietà. Tuttavia, a differenza della tecnica CSS, tutta la complessità è ben astratta in modo che tu ti concentri solo sul posizionamento degli elementi nel modo desiderato. La parte migliore è che tutto il codice e i nomi delle classi imitano ciò che vorresti in Bootstrap 4, il che significa che il passaggio tra questi due strumenti richiede zero attriti mentali. Ad esempio, ecco come appare il codice per lo “spazio intorno” nella griglia Flexbox:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
Il file CSS ridotto per questo sistema a griglia è di soli 10,7 KB e ti fa risparmiare diverse centinaia di KB nella dimensione del download finale. In questi giorni la Flexbox Grid è la mia preferita perché non voglio combattere Bootstrap per personalizzarla completamente. Mi piace iniziare con elementi vaniglia e modellarli da solo, utilizzando la griglia Flexbox ovunque sia necessario.
Imparare Flexbox qui, in linea.
Pure CSS
Non sarebbe bello se Bootstrap fosse suddiviso in moduli e potessi importare solo il modulo di cui hai bisogno?
Bene, Pure CSS è andato avanti e ha fatto proprio questo: è un insieme di moduli che coprono diverse aree funzionali di un sito Web. Puoi scegliere di scaricarne uno o tutti, ma la dimensione del download non supererà i 3,7 KB!
Sì, avete letto bene.
Tutti i moduli quando sono raggruppati insieme e compressi con gzip sono 3,7 KB, anche se singolarmente ammontano a più. Il modulo grid è solo 0,8 KB, mentre il modulo Base è 1,0 KB. Il team dietro PureCSS afferma che è stato creato interamente pensando ai dispositivi mobili, quindi ogni linea di CSS è stata attentamente esaminata per verificarne l’efficienza prima di essere inclusa.
Quindi supponiamo che tu abbia bisogno solo del modulo griglia e moduli. Bene, scarica questi due (insieme al modulo Base) e avresti finito in meno di 3,4 KB! Non è necessario includere i CSS dai moduli Pulsanti, Tabelle e Menu se non li utilizzerai.
PureCSS ha le sue classi, tuttavia, e il codice risultante non imita il Bootstrap a cui potresti essere molto abituato:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Noterai che non esiste più una griglia a 12 colonne. PureCSS ha il suo sistema di griglia che specifica quanta larghezza dovrebbe prendere una colonna. Quindi, pure-u-lg-1-4 significa che questo elemento dovrebbe occupare 1/4 o il 25% della larghezza disponibile su schermi di grandi dimensioni. Sono disponibili anche larghezze multiple di 1/5.
Tutto sommato, PureCSS è uno strumento CSS (framework?) liberatorio e sorprendente che puoi scegliere e scegliere secondo necessità. Detto questo, viene fornito con una buona dose di adesione e curva di apprendimento poiché è necessario imparare un nuovo modo (leggermente diverso) di fare le cose.
PureCSS ha anche le sue classi e uno stile predefinito, quindi non è troppo diverso da Bootstrap.
Zimit
Il Zimit framework è una specie di strano in questa lista. Sì, è un framework per la creazione di UI, ma è rivolto a particolari tipi di UI: i mockup.
Ci sono momenti in cui devi sviluppare il front-end per mostrare il funzionamento del prodotto. Il modo ideale per farlo, ovviamente, sarebbe coinvolgere un designer/sviluppatore dell’interfaccia utente e creare i modelli su uno degli strumenti avanzati di wireframing (mi viene in mente Moqups, Blasmic, ecc.). Le pagine sarebbero perfette per i pixel, la combinazione di colori elegante e ben scelta e le pagine sarebbero aperte per la partecipazione, recensioni, commenti, ecc.
Ma la vita reale non è l’ideale, e spesso sei l’unico uomo al lavoro e devi indossare tutti i cappelli e portare a termine il lavoro. A quei tempi, vuoi un framework che:
- Consente di codificare in HTML/CSS
- È leggero
- Ha una vasta collezione di componenti fondamentali
- Ha un linguaggio di stile decente e coerente
- Se possibile, ricorda il tono “grigiastro” del design wireframe
- È facile da imparare
- Ha un preprocessore CSS integrato
Zimit seleziona tutte queste caselle. Ha una dimensione di soli 84 KB e ha un’ampia gamma di componenti tra cui scegliere. Ecco alcuni esempi che ho trovato davvero interessanti, poiché la codifica da soli richiederà molto tempo.
Visualizzazione ad albero
Percorso di navigazione
Schede
Ci sono molte altre chicche da esplorare. Dai un’occhiata qui.
Diamo un’occhiata a come appare il codice. Ecco come useresti il sistema a griglia in Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
La “c” qui sta per “colonna”, quindi “c4” significa una colonna che si estende su quattro unità (la griglia è di 12 dimensioni, proprio come quella di Bootstrap). Molto simile a Bootstrap e molto intuitivo, secondo me.
Tutto sommato, Zimit è un framework completo e semplice per sviluppare prototipi di interfaccia utente che siano reattivi e abbiano un bell’aspetto rapidamente. È meglio di Bootstrap (quando si tratta di prototipazione) perché Bootstrap è un download molto più grande e il design risultante è, beh, di cattivo gusto.
Avvio HTML
Nella maggior parte dei progetti che crei, la velocità è fondamentale. Il più grande ostacolo alla velocità nello sviluppo web è la parte front-end e il più grande “ritardatore” nello sviluppo front-end è la necessità di codificare componenti interattivi dall’aspetto elegante. Poiché ci sono molti modi in cui un componente può comportarsi e ci sono molte dimensioni dello schermo da gestire, la codifica e la gestione dei componenti può diventare un incubo per lo sviluppatore.
Avvio HTML offre un’alternativa.
In poche parole; è una raccolta di componenti davvero eleganti che puoi semplicemente inserire nei tuoi progetti e ridurre drasticamente i tempi di sviluppo. Ecco alcuni bei componenti che ho trovato:
Cadere in picchiata
Bottoni
Schede (centrate e con icone)
Materializza
Se ti piace Bootstrap per il fatto che ha una soluzione già pronta per tutti i comuni problemi di web design, ma sei un fan dello stile di design dei materiali, dovresti provare Materializza.
Materialise è per lo più proprio come Bootstrap: sistema di griglia a 12 punti, offset e componenti familiari come moduli, carte, ecc. Tuttavia, ha alcune chicche che possono piacere a molti.
Push-pull
La funzione push/pull di Materialise CSS ti consente di riordinare le colonne. Questo ricorda il nuovo standard CSS Grid, dove il layout è diverso dall’ordine degli elementi.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Ciò si traduce in quanto segue:
Noterai che le colonne hanno cambiato posizione, cosa forse irraggiungibile nel tradizionale CSS basato su Bootstrap.
Chicche JavaScript
Ci sono alcune funzionalità ed effetti JavaScript forniti con Materialise. Tooltip, Toast (notifiche temporanee simili ad Android), Parallex, Pushpin, ecc., sono alcuni di questi. Un effetto davvero sorprendente che mi è piaciuto è FeatureDiscovery, che fondamentalmente ti consente di evidenziare un elemento nella pagina su un evento (ad esempio, premere un pulsante) per attirare l’attenzione dell’utente su quell’elemento. È difficile descriverlo a parole completamente, quindi vai su https://materializecss.com/feature-discovery.html per vedere cosa intendo.
Tutto sommato, Materialise è un’ottima alternativa a Bootstrap o per coloro che desiderano adottare un framework Material CSS completo.
Conclusione
Bootstrap è sinonimo di design reattivo. È stato Bootstrap a rendere popolare il termine “design mobile first” e a mostrare come si poteva farlo. Ma mentre Bootstrap fa il lavoro per la maggior parte del tempo, portare a termine il lavoro non è sempre sufficiente. Se ritieni che Bootstrap ti stia limitando e che le tue esigenze siano speciali, una delle opzioni elencate qui ti aiuterà. 🙂