Bulma CSS Framework Spiekbrief

Bulma Bulma is een modern open-source CSS-framework dat volledig is gebaseerd op Flexbox.

Responsieve breekpunten

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

• Mobiel: tot 768px
• Tablet: vanaf 769px
• Desktop: vanaf 1024px
• Breedbeeld: vanaf 1216px
• FullHD: vanaf 1408px

---

Kolommen-rastersysteem

Plaats onderliggende .column-elementen in een .columns flex-container:

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

Kolombreedtemodifiers

<div class="column is-half">Halve breedte</div>
<div class="column is-one-third">1/3 breedte</div>
<div class="column is-three-quarters">3/4 breedte</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Kernmodifiers

Kleuren

• .is-primary: Turkoois
• .is-link: Blauw
• .is-info: Cyaan
• .is-success: Groen
• .is-warning: Geel
• .is-danger: Rood

Maten

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

Statussen

• .is-outlined: Transparante achtergrond met gekleurde rand
• .is-loading: Geanimeerde ingebouwde laadspinner
• .is-disabled: Visueel inactief

---

Typografie-helpers

Lettergroottes

Uitlijning & teksttransformaties

• .has-text-centered: Gecentreerd uitlijnen
• .has-text-left: Links uitlijnen
• .has-text-right: Rechts uitlijnen
• .has-text-justified: Uitvullen
• .is-capitalized: Eerste letter van elk woord als hoofdletter
• .is-lowercase: Alles in kleine letters
• .is-uppercase: Alles in hoofdletters

---

WYSIWYG-inhoudscontainer

Gebruik .content om ongeformatteerde markdown of CMS-inhoud op te maken:

<div class="content">
  <h1>Hoofdtitel</h1>
  <p>Standaard alinea met automatische typografische schaling.</p>
  <ul>
    <li>Lijstitem met opsommingsteken 1</li>
    <li>Lijstitem met opsommingsteken 2</li>
  </ul>
</div>