Bulma css, una valida alternativa a Bootstrap 4?

IMPORTANTE

La guida a Laravel 7 sta arrivando!

Sviluppare Applicazioni Web con Laravel sarà presto disponibile.

Nato dalla mente del Guru del CSS @Jeremy Thomas, Bulma è un Framework CSS basato su Flexbox che unisce facilità di sintassi, eleganza , leggerezza e un forte approccio Mobile First.

Ah dimenticavo: Bulma non include alcun Framework Javascript. Non è previsto nessuna libreria JS in modo nativo, avrai carta bianca sul tipo di linguaggio da utilizzare.

Sta a te decidere se è un punto a favore o a sfavore, ovviamente.

L’installazione di Bulma

Importare Bulma nel tuo progetto risulterà semplicissimo.

Le modalità di installazione sono 3:

import ‘bulma/css/bulma.css’

Scaricare il file Bulma.css da Github e importarlo direttamente nelle resource del tuo progetto;

<link rel="stylesheet" href="~/cartella-risorse/bulma.min.css">

Oppure utilizzando il CDN di riferimento;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

Tutto in unico file CSS!

Per praticità e immediatezza, utilizzeremo il CDN. Ecco un esempio di un semplice file di index:

index.html
______________
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Il mio Bulma</title>
		<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css>">
    <script defer src="<https://use.fontawesome.com/releases/v5.3.1/js/all.js>"></script>
  </head>
  <body>
 
  </body>
</html>

Mobile First

Bulma, come detto, strizza entrambi gli occhi (o 3 se ti chiami Tensing,ndr) al Mobile.

Le classi presenti sono ottimizzate per il verticale, ma ciò non ostacola la fruibilità anche su device più grandi.

A differenza di Bootstrap, Bulma introduce un quinto Breakpoints per rendere l’esperienza d’uso il più piacevole possibile:

mobile: fino 768px
tablet: da 769px
desktop: da 1024px
widescreen: da 1216px
fullhd: da 1408px

E non è finita qui. Ci sono ben 9 Responsive Mixins!

mobile fino a 768px
tablet da 769px
tablet-only da 769px e fino a 1023px
touch fino a 1023px
desktop da 1024px
desktop-only da 1024px e fino a 1215px
widescreen da 1216px
widescreen-only da 1216px e fino a 1407px
fullhd da 1408px

Ecco la documentazione ufficiale per tutti gli altri helper.

I modificatori

Eccoci arrivati al codice vero e proprio. Bulma utilizza una metodo di sintassi molto intuitivo.

is- : Applicherà lo stile scelto all'elemento in questione. Ad esempio utilizzando “ button is-large ” indicheremo che l’elemento bottone avrà una dimensione large;

has- : Applicherà ai “figli” dell’elemento la classe scelta. Ad esempio utilizzando “ container has-text-right ” indicheremo che tutti gli elementi contenuti nel <div> in questione, avranno un allineamento a destra;

Vediamo subito alcuni esempi dell’utilizzo di questi modificatori.

Ah, dimenticavo. Non scriveremo una sola riga di codice CSS.

Esempio 1: Creare un bottone di colore rosso, molto grande, con i bordi tondi.

<a class="button is-danger is-large is-rounded">Bottone</a>

button : La classe generica per definire <a> come button;
is-danger : Un helper che richiamerà il colore rosso;
is-large : La sintassi per definire la grandezza dell’elemento;
is-rounded : Una classe che renderà ci regalerà l’effetto tondeggiante;

Esempio 2: Creare tre bottoni di modifica, cancellazione e visualizzazione allineati a destra.

<div class="container has-text-right">
  <a class="icon has-text-primary">
    <i class="fas fa-eye"></i>
  </a>
  <a class="icon has-text-warning">
    <i class="fas fa-edit"></i>
  </a>
  <a class="icon has-text-danger">
    <i class="fas fa-trash"></i>
  </a>
</div>

has-text-right : Tutto quello che inseriremo all'interno di questo elemento <div> sarà allineato a destra;
has-text-warning/danger/primary : Tutto quello che inseriremo all'interno di questo elemento <a> sarà colorato con la classe scelta.

Ecco la documentazione ufficiale per tutti gli altri modificatori.

Griglia che passione

Non sarà bello e divertente come una grigliata con gli amici, ma realizzare una griglia con Bulma sarà altrettanto divertente.

Bulma, come detto, utilizza Flexbox. Potrai creare il tuo layout Flessibile velocemente, e senza dover imparare codice CSS extra.

Esempio 1: Creare un’ipotetica griglia per un portfolio. La griglia dovrà essere composta da 3 righe:

1 Riga: 4 Colonne
2 Riga: 2 Colonne
3 Riga: 1 Colonna

<div class="columns is-multiline">
  <div class="column is-one-quarter">
    <div class="notification is-primary">
    </div>
  </div>
  <div class="column is-one-quarter">
    <div class="notification is-primary">
    </div>
  </div>
  <div class="column is-one-quarter">
    <div class="notification is-primary">
    </div>
  </div>
  <div class="column is-one-quarter">
    <div class="notification is-primary">
    </div>
  </div>
  <div class="column is-half">
    <div class="notification is-primary">
    </div>
  </div>
  <div class="column is-half">
    <div class="notification is-primary">
    </div>
  </div>
   <div class="column is-full">
    <div class="notification is-primary">
    </div>
  </div>
</div>

columns: L’equivalente del row di Bootstrap. Indica l’inizio di una riga;
column: Indica l’inizio della tua colonna , l’equivalente di col di Bootstrap;
is-multiline: Una classe che sfrutta appieno il Flexbox. Normalmente dovresti chiudere e riaprire le righe, con questa classe potrai inserire infinite column;
if-full/is-half/is-one-quarter: Questi modificatori, in combinazione con is-multline, ti permetteranno di generare in modo dinamico intere griglie. Andranno automaticamente a capo, senza dover mai intervenire manualmente;

Ecco la documentazione ufficiale per tutti le altri classi di columns.

Libera la tua fantasia

Bulma si compone di altri elementi, naturalmente. Andando sulla documentazione ufficiale potrai trovare le sezioni relative a:

Tutte le classi presenti saranno compatibili con il Framework Javascript che sceglierai.

Ecco un rapido template di un portfolio realizzato utilizzando solamente le classi già presenti in Bulma.

See the Pen Bulma Portfolio by francescomansi (@framansi) on CodePen.

Tempo di realizzazione: 2 Minuti

Codice CSS Custom: 0

Un ipotetico Portfolio completo di navbar, titolo, griglia con le immagini e footer.

E per concludere vi lascio un’ultima risorsa. Una piccola tabella di confronto tra Bulma e Bootstrap tra le classi dei due Framework.

Le principali differenze tra i due Framework CSS