Bulma, una valida alternativa a Bootstrap

Pubblicato 1 month ago ・ 5 mins read
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 ThomasBulma è un Framework CSS basato su Flexbox che unisce facilità di sintassieleganza , 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

Le principali differenze tra i due Framework CSS




IMPORTANTE

La guida a Laravel 7 sta arrivando!

Sviluppare Applicazioni Web con Laravel sarà presto disponibile.

© 2020 Francesco Mansi

Questo sito utilizza cookie tecnici per migliorare l'esperienza utente.