
La guida a Laravel 7 sta arrivando!
Laravel per Tutti sarà presto disponibile.
Resta in contatto, scegli tu il modo.
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
: fino768px
tablet
: da769px
desktop
: da1024px
widescreen
: da1216px
fullhd
: da1408px
E non è finita qui. Ci sono ben 9 Responsive Mixins!
mobile
fino a768px
tablet
da769px
tablet-only
da769px
e fino a1023px
touch
fino a1023px
desktop
da1024px
desktop-only
da1024px
e fino a1215px
widescreen
da1216px
widescreen-only
da1216px
e fino a1407px
fullhd
da1408px
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.
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.
La guida a Laravel 7 sta arrivando!
Laravel per Tutti sarà presto disponibile.
Resta in contatto, scegli tu il modo.