Cheat Sheet del framework Bulma CSS

Bulma Bulma è un moderno framework CSS open source basato interamente su Flexbox.

Breakpoint responsive

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• Mobile: fino a 768px
• Tablet: da 769px
• Desktop: da 1024px
• Widescreen: da 1216px
• FullHD: da 1408px

---

Sistema di griglia a colonne

Racchiudi gli elementi secondari .column all'interno di un contenitore flex .columns:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Modificatori di larghezza delle colonne

<div class="column is-half">Metà larghezza</div>
<div class="column is-one-third">1/3 di larghezza</div>
<div class="column is-three-quarters">3/4 di larghezza</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Modificatori di base

Colori

• .is-primary: Turchese
• .is-link: Blu
• .is-info: Ciano
• .is-success: Verde
• .is-warning: Giallo
• .is-danger: Rosso

Dimensioni

• .is-small
• .is-normal
• .is-medium
• .is-large

Stati

• .is-outlined: Sfondo trasparente con bordo colorato
• .is-loading: Spinner di caricamento animato integrato
• .is-disabled: Visivamente disabilitato

---

Classi di supporto tipografico

Dimensioni dei caratteri

Allineamento e trasformazione del testo

• .has-text-centered: Allineamento al centro
• .has-text-left: Allineamento a sinistra
• .has-text-right: Allineamento a destra
• .has-text-justified: Testo giustificato
• .is-capitalized: Iniziale maiuscola per ogni parola
• .is-lowercase: Tutto minuscolo
• .is-uppercase: Tutto maiuscolo

---

Contenitore di contenuti WYSIWYG

Usa .content per formattare testo semplice, markdown o contenuti utente da CMS:

<div class="content">
  <h1>Titolo principale</h1>
  <p>Paragrafo standard con ridimensionamento tipografico automatico.</p>
  <ul>
    <li>Elemento dell'elenco puntato 1</li>
    <li>Elemento dell'elenco puntato 2</li>
  </ul>
</div>