/https://www.html.it/app/uploads/2018/11/Bulma.png "Bulma: framework CSS basato su tecnologia Flexbox")
Il panorama dei framework CSS si arricchisce ogni giorno di più di strumenti di alta qualità, e questa è un'ottima notizia per tutti gli sviluppatori Web che operano lato front-end. Le potenzialità offerte dal CSS3 sono enormi, ma da grandi poteri derivano grandi responsabilità, quindi uno strumento che offra uno stack di controlli ad alto livello, rispettosi dei più rigorosi standard qualitativi con cui realizzare interfacce utente di nuova generazione, responsive e mobile-first, è fortemente necessario.
Oltre ai famosi Bootstrap, w3.css e Foundation, analizziamo oggi Bulma, un framework CSS modulare, open-source ed interamente basato sulla tecnologia Flexbox, utilizzato correntemente da più di 100.000 sviluppatori.
Essendo basato su Flexbox, le possibilità offerte da Bulma sono pressoché infinite, e la compatibilità con browser e device dipende dal loro supporto a tale standard.
L'installazione di Bulma è una procedura semplicissima, possiamo usare infatti npm, l'apposito CDN o il download in locale. Il template di base, per verificare che tutto funzioni, è il seguente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>La documentazione ufficiale copre tutti i componenti di ogni singola API del prodotto, dalle classi più semplici per i controlli testuali e di formattazione, fino a quelli più avanzati e complessi come la generazione di layout ed effetti moderni (tooltips, accordions, scrollbars, menù e cosi via).
Nella sezione demo invece, troviamo una collezione di video che oltre a spiegare perfettamente il funzionamento del framework, mostrano i risultati concreti che possiamo ottenere.
Bulma è rilasciato sotto licenza MIT-style ed è privo di qualsiasi dipendenza JavaScript o CSS esterna, caratteristica che lo rende perfettamente integrabile con qualsiasi framework Javascript moderno.
Via Bulma
/https://www.html.it/app/uploads/2024/06/css-2.png)
/https://www.html.it/app/uploads/2024/06/google-chrome-_-.jpg)
/https://www.html.it/app/uploads/2024/04/css.png)
/https://www.html.it/app/uploads/2024/01/cssday.png)