Bulma Bulma är ett modernt CSS-ramverk med öppen källkod som helt baseras på Flexbox.
Responsiva brytpunkter
768px 1024px 1216px 1408px
<---------^------------^------------------^-------------^------------->
Mobile Tablet Desktop Widescreen FullHD
- Mobil: upp till 768px
- Surfplatta: från 769px
- Skrivbord: från 1024px
- Bredbild: från 1216px
- FullHD: från 1408px
Kolumnrutnät (Columns Grid)
Placera underordnade .column-element inuti en .columns flex-behållare:
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Breddsmodifierare för kolumner
<div class="column is-half">Halv bredd</div>
<div class="column is-one-third">1/3 bredd</div>
<div class="column is-three-quarters">3/4 bredd</div>
<div class="column is-4">4 / 12 (1/3)</div>
Kärnmodifierare
Färger
.is-primary: Turkos.is-link: Blå.is-info: Cyan.is-success: Grön.is-warning: Gul.is-danger: Röd
Storlekar
.is-small.is-normal.is-medium.is-large
Tillstånd
.is-outlined: Genomskinlig bakgrund med färgad ram.is-loading: Inbäddad animerad laddningssnurra.is-disabled: Visuellt inaktiv
Typografiska hjälpklasser
Teckenstorlekar
| Klass | Beräknad storlek |
|---|---|
.is-size-1 |
3rem |
.is-size-2 |
2.5rem |
.is-size-3 |
2rem |
.is-size-4 |
1.5rem |
.is-size-5 |
1.25rem |
.is-size-6 |
1rem |
.is-size-7 |
0.75rem |
Justering och texttransformering
.has-text-centered: Centrerad justering.has-text-left: Vänsterjustering.has-text-right: Högerjustering.has-text-justified: Marginaljustering.is-capitalized: Stor bokstav i början av varje ord.is-lowercase: Endast gemener.is-uppercase: Endast versaler
WYSIWYG-innehållsbehållare
Använd klassen .content för att formatera rå markdown eller CMS-innehåll:
<div class="content">
<h1>Huvudrubrik</h1>
<p>Standardstycke med automatisk typografisk skalning.</p>
<ul>
<li>Punktlistobjekt 1</li>
<li>Punktlistobjekt 2</li>
</ul>
</div>