Fișă recapitulativă pentru framework-ul Bulma CSS

Bulma Bulma este un framework CSS modern și open-source, bazat în totalitate pe Flexbox.

Puncte de întrerupere responsive (Breakpoints)

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

• Mobil: până la 768px
• Tabletă: de la 769px
• Desktop: de la 1024px
• Ecran lat: de la 1216px
• FullHD: de la 1408px

---

Sistem de grilă pe coloane

Includeți elementele copil .column într-un container 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 de lățime a coloanelor

<div class="column is-half">Jumătate de lățime</div>
<div class="column is-one-third">1/3 lățime</div>
<div class="column is-three-quarters">3/4 lățime</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Modificatori de bază

Culori

• .is-primary: Turcoaz
• .is-link: Albastru
• .is-info: Cyan
• .is-success: Verde
• .is-warning: Galben
• .is-danger: Roșu

Dimensiuni

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

Stări

• .is-outlined: Fundal transparent cu bordură colorată
• .is-loading: Indicator animat de încărcare inclus
• .is-disabled: Inactiv vizual

---

Utilitare de tipografie

Dimensiuni de font

Aliniere și transformare text

• .has-text-centered: Aliniat pe centru
• .has-text-left: Aliniat la stânga
• .has-text-right: Aliniat la dreapta
• .has-text-justified: Text aliniat la ambele capete (justified)
• .is-capitalized: Inițială majusculă pentru fiecare cuvânt
• .is-lowercase: Toate literele mici
• .is-uppercase: Toate literele mari

---

Container de conținut WYSIWYG

Folosiți .content pentru a formata text markdown sau conținut CMS:

<div class="content">
  <h1>Titlu principal</h1>
  <p>Paragraf standard cu scalare tipografică proporțională.</p>
  <ul>
    <li>Element de listă cu puncte 1</li>
    <li>Element de listă cu puncte 2</li>
  </ul>
</div>