Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Bulma: framework CSS basato su tecnologia Flexbox

Bulma è framework CSS basato su Flexbox per la creazione di progetti responsive e mobile-first.
Bulma: framework CSS basato su tecnologia Flexbox
Bulma è framework CSS basato su Flexbox per la creazione di progetti responsive e mobile-first.
Link copiato negli appunti

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

Ti consigliamo anche