Bulma framework

  1. Home
  2. Blog
  3. Bulma framework
Bulma framework

Bulma framework

Bulma Framework: La Guida Completa per Sviluppatori Moderni

Introduzione e Storia di Bulma framework

Bulma è stato creato da Jeremy Thomas nel 2016 per semplificare il processo di costruzione di applicazioni web responsive. Bulma è un framework CSS gratuito, open source basato su Flexbox e costruito con Sass. È 100% responsive, completamente modulare, e disponibile gratuitamente.

La filosofia di Bulma si distingue per la sua modernità e semplicità: Bulma è un framework CSS. Come tale, l’unico output è un singolo file CSS: bulma.css. Non è incluso JavaScript. Le persone generalmente vogliono usare la propria implementazione JS (e di solito ne hanno già una). Bulma può essere considerato “environment agnostic”: è solo il layer di stile sopra la logica.

Caratteristiche Principali di Bulma framework

Mobile-First e Responsive Design

Bulma adotta un approccio mobile-first, garantendo che ogni componente sia ottimizzato per dispositivi mobili e si adatti automaticamente a schermi più grandi. Il sistema di breakpoint predefinito include:

  • Mobile: fino a 768px
  • Tablet: da 769px a 1023px
  • Desktop: da 1024px a 1215px
  • Widescreen: da 1216px a 1407px
  • FullHD: da 1408px in su

Basato su Flexbox – Bulma framework

L’intero framework è costruito utilizzando Flexbox, garantendo layout flessibili e predittibili. Bulma utilizza autoprefixer per rendere (la maggior parte) delle funzionalità Flexbox compatibili con le versioni precedenti dei browser.

Modularità Totale – Bulma framework

Questo framework è modulare, il che significa che puoi importare solo ciò di cui hai bisogno. Puoi includere singoli componenti o intere sezioni, ottimizzando le dimensioni del CSS finale.

Installazione e Setup – Bulma framework

Installazione tramite CDN

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

Installazione tramite npm

npm install bulma

Installazione tramite Yarn

yarn add bulma

Template HTML di Base

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Bulma App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">Hello Bulma!</h1>
        <p class="subtitle">My first website with Bulma!</p>
      </div>
    </section>
  </body>
</html>

Versioni e Migrazione

Bulma v1.0

La versione 1.0 di Bulma introduce significativi miglioramenti, tra cui:

  • Supporto nativo per CSS Variables
  • Modalità Dark integrata
  • Nuovi Color Palettes
  • Skeleton loaders
  • Miglioramenti nelle performance

Sintassi e Convenzioni

Bulma utilizza una sintassi basata su classi CSS semantiche:

<!-- Elemento base -->
<button class="button">Button</button>

<!-- Con modificatori -->
<button class="button is-primary is-large">Primary Large Button</button>

<!-- Con stati -->
<button class="button is-primary is-loading">Loading Button</button>

Architettura e Modularità di Bulma framework

Struttura del Framework

Bulma è organizzato in diverse categorie:

  1. Base: Reset CSS e variabili globali
  2. Elements: Componenti base come bottoni, form, tabelle
  3. Components: Componenti complessi come navbar, modal, card
  4. Grid: Sistema di griglia basato su Flexbox
  5. Layout: Strutture di layout come hero, section, footer
  6. Utilities: Classi helper per spacing, typography, visibility

Importazione Modulare

// Importa solo gli elementi necessari
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/elements/button.sass";
@import "bulma/sass/components/navbar.sass";

Sass Tools e Customizzazione

Setup Sass

Per personalizzare Bulma con Sass, devi prima installare Sass. L’approccio raccomandato è usare il pacchetto npm sass:

npm install sass

Configurazione package.json

{
  "scripts": {
    "build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
    "start": "npm run build-bulma -- --watch"
  }
}

Personalizzazione delle Variabili

// my-bulma-project.scss

// Personalizza le variabili prima dell'importazione
$primary: #ff6b6b;
$danger: #ff5252;
$family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;

// Importa Bulma
@import "bulma/bulma.sass";

// Aggiungi stili personalizzati
.my-custom-button {
  background: linear-gradient(45deg, $primary, $danger);
  border: none;
  color: white;
}

CSS Variables

Tutti i componenti Bulma sono stilizzati usando variabili Sass e CSS Variables (che sono anche chiamate CSS custom properties):

:root {
  --bulma-primary-h: 348deg;
  --bulma-primary-s: 86%;
  --bulma-primary-l: 61%;
}

.custom-theme {
  --bulma-primary: hsl(204, 71%, 53%);
}

Esempi di Layout Completi – Bulma framework

Dashboard Layout

<div class="columns is-fullheight">
  <!-- Sidebar -->
  <div class="column is-2">
    <aside class="menu">
      <p class="menu-label">General</p>
      <ul class="menu-list">
        <li><a class="is-active">Dashboard</a></li>
        <li><a>Customers</a></li>
        <li><a>Orders</a></li>
      </ul>
    </aside>
  </div>
  
  <!-- Main Content -->
  <div class="column">
    <div class="box">
      <div class="content">
        <h1 class="title">Dashboard</h1>
        <div class="columns">
          <div class="column">
            <div class="notification is-primary">
              <strong>1,234</strong><br>
              Total Users
            </div>
          </div>
          <div class="column">
            <div class="notification is-info">
              <strong>567</strong><br>
              Active Sessions
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Landing Page Layout

<!-- Hero Section -->
<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-1">Welcome to Our Platform</h1>
      <h2 class="subtitle is-3">Build amazing things with Bulma</h2>
      <a class="button is-white is-large" href="#features">Get Started</a>
    </div>
  </div>
</section>

<!-- Features Section -->
<section id="features" class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <h3 class="title is-4">Fast</h3>
            <p>Lightning fast performance with minimal CSS footprint.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <h3 class="title is-4">Responsive</h3>
            <p>Mobile-first design that looks great on any device.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <h3 class="title is-4">Modern</h3>
            <p>Built with the latest CSS technologies and best practices.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS Helpers e Utilities -Bulma framework

Spacing Helpers

<!-- Margin helpers -->
<div class="mt-6">Margin top large</div>
<div class="px-4">Padding horizontal medium</div>

<!-- Flexbox helpers -->
<div class="is-flex is-justify-content-center is-align-items-center">
  <p>Centered content</p>
</div>

Typography Helpers

<h1 class="title is-1 has-text-centered has-text-primary">
  Large Primary Title
</h1>
<p class="subtitle is-4 has-text-grey has-text-weight-light">
  Light grey subtitle
</p>

Color Helpers

<div class="has-background-primary-light has-text-primary-dark p-4">
  Light primary background with dark primary text
</div>

Confronto con Altri Framework

Bulma framework vs Bootstrap

  • Bulma: Basato su Flexbox, no JavaScript, sintassi più moderna
  • Bootstrap: Più maturo, ecosystem più ampio, include JavaScript

Bulma vs Tailwind CSS

  • Bulma: Componenti pre-costruiti, curva di apprendimento più dolce
  • Tailwind: Utility-first, maggiore controllo granulare, file CSS più ottimizzati

Bulma vs Foundation

  • Bulma: Più semplice da usare, focus su componenti moderni
  • Foundation: Più potente per progetti complessi, maggiore flessibilità

Quando Usare Bulma framework

Scenari Ideali

  • Prototipazione rapida: Componenti pronti all’uso velocizzano lo sviluppo
  • Progetti senza JavaScript framework: Perfetto per siti statici o server-side rendered
  • Team con competenze CSS limitate: Sintassi intuitiva e documentazione eccellente
  • Applicazioni moderne: Design contemporaneo e responsive out-of-the-box

Progetti che Beneficiano di Bulma framework

  • Dashboard amministrative
  • Landing pages
  • Portfolios e siti vetrina
  • Applicazioni web semplici-medie
  • Prototipi e MVP

Quando NON Usare Bulma framework

Limitazioni da Considerare

  • Progetti con design altamente personalizzato: Può essere limitante per design molto specifici
  • Applicazioni enterprise complesse: Potrebbe mancare di componenti avanzati
  • Controllo granulare del CSS: Utility-first frameworks come Tailwind offrono maggiore controllo
  • Supporto browser legacy: Flexbox potrebbe non essere supportato su browser molto vecchi

Alternative da Considerare

  • Bootstrap: Per progetti che richiedono JavaScript integrato
  • Tailwind CSS: Per controllo granulare e ottimizzazione delle dimensioni
  • Ant Design: Per applicazioni enterprise con componenti complessi

Bulma Extensions

L’ecosistema Bulma include diverse estensioni della comunità che aggiungono funzionalità:

Categorie di Estensioni

  • Form Extensions: Slider, switch, calendar picker
  • Components: Timeline, steps, carousel
  • Layout Extensions: Collapsible, divider
  • JavaScript Integrations: Modal controller, navbar burger

Esempio di Estensione

<!-- Bulma-slider extension -->
<input class="slider is-fullwidth" step="1" min="0" max="100" value="50" type="range">

Best Practices per Sviluppatori

Organizzazione del Codice

// Struttura raccomandata
// 1. Variabili personalizzate
$custom-colors: (
  "twitter": #55acee,
  "linkedin": #0077b5
);

// 2. Importazioni Bulma
@import "bulma/bulma.sass";

// 3. Estensioni personalizzate
@each $name, $color in $custom-colors {
  .has-background-#{$name} {
    background-color: $color !important;
  }
}

Performance Optimization

// Importa solo i componenti necessari
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/elements/button.sass";
@import "bulma/sass/elements/form.sass";
@import "bulma/sass/components/navbar.sass";
@import "bulma/sass/components/card.sass";
@import "bulma/sass/layout/section.sass";

Conclusioni Bulma framework

Bulma rappresenta una scelta eccellente per sviluppatori che cercano un framework CSS moderno, flessibile e facile da usare. La sua architettura modulare, la sintassi intuitiva e la completa compatibilità con Flexbox lo rendono ideale per progetti web contemporanei.

Il framework è basato sul preprocessore CSS Sass, permettendo opzioni di styling più sofisticate e personalizzazione delle variabili. Questa caratteristica è particolarmente vantaggiosa per team che vogliono mantenere uno stile coerente attraverso più progetti o applicazioni.

La combinazione di semplicità d’uso, potenza di customizzazione e design moderno fa di Bulma una valida alternativa ai framework più consolidati, specialmente per progetti che privilegiano la velocità di sviluppo e la pulizia del codice.

Formazione e Competenze

Per lavorare efficacemente con Bulma e framework CSS avanzati, è fondamentale che gli sviluppatori abbiano una solida preparazione. Errori nell’implementazione possono costare caro in termini di tempo, budget e qualità del prodotto finale.

Consigliamo di investire nella formazione del team di sviluppo per garantire l’uso corretto di Bulma e delle tecnologie moderne. Per questo motivo, suggeriamo di contattare Innovaformazione, azienda specializzata in formazione IT, per richiedere un corso aziendale personalizzato che possa preparare il vostro team alle sfide dello sviluppo frontend moderno.

(fonte) (fonte) (fonte)

Potete visionare l’elenco corsi in ambito sviluppo web sul nostro sito QUI.

Per leggere altri articoli tecnici consigliamo invece di navigare sul nostro blog QUI.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)

Ti potrebbe interessare

Articoli correlati

Claude Code per i droni

Claude Code per i droni

Claude Code per i droni Claude Code per i droni Claude Code, l’ambiente di sviluppo agentico di Anthropic, si sta ...
Claude Code e Migrazioni SAP

Claude Code e Migrazioni SAP

Claude Code e Migrazioni SAP Claude Code e Migrazioni SAP: Guida Tecnica per Consulenti e Sviluppatori ABAP Con il supporto ...
Claude Code controllo remoto

Claude Code controllo remoto

Claude Code controllo remoto Claude Code controllo remoto Venerdì sera, ore 18:47. Giulia, team lead di TeamCore Srl, sta chiudendo ...
Opportunità Carriera Contabilità SAP

Opportunità Carriera Contabilità SAP

Opportunità Carriera Contabilità SAP Opportunità, Carriera, Contabilità, SAP Ti sei mai chiesto che cosa separi una normale routine d’ufficio da ...
Guida SIA AI

Guida SIA AI

Guida SIA AI Guida SIA AI (Self-Improving AI) Un agente che, al termine di ogni run, riscrive da solo il ...
Guida Dual LLM Verification

Guida Dual LLM Verification

Guida Dual LLM Verification Guida Dual LLM Verification Chiedere alla stessa intelligenza artificiale che ha scritto una funzione di rileggerla ...