Bulma Bulma to nowoczesny framework CSS o otwartym kodzie źródłowym, oparty w całości na module Flexbox.
Responsywne punkty przerwania (Breakpoints)
768px 1024px 1216px 1408px
<---------^------------^------------------^-------------^------------->
Mobile Tablet Desktop Widescreen FullHD
- Mobile: do 768px
- Tablet: od 769px
- Desktop: od 1024px
- Widescreen: od 1216px
- FullHD: od 1408px
System siatki kolumn
Umieść elementy potomne .column wewnątrz kontenera elastycznego .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>
Modyfikatory szerokości kolumn
<div class="column is-half">Połowa szerokości</div>
<div class="column is-one-third">1/3 szerokości</div>
<div class="column is-three-quarters">3/4 szerokości</div>
<div class="column is-4">4 / 12 (1/3)</div>
Podstawowe modyfikatory
Kolory
.is-primary: Turkusowy.is-link: Niebieski.is-info: Cyjan.is-success: Zielony.is-warning: Żółty.is-danger: Czerwony
Rozmiary
.is-small.is-normal.is-medium.is-large
Stany
.is-outlined: Przezroczyste tło z kolorową ramką.is-loading: Animowany wskaźnik ładowania.is-disabled: Wizualnie nieaktywny
Klasy pomocnicze typografii
Rozmiary czcionek
| Klasa | Obliczony rozmiar |
|---|---|
.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 |
Wyrównanie i transformacja tekstu
.has-text-centered: Wyrównanie do środka.has-text-left: Wyrównanie do lewej.has-text-right: Wyrównanie do prawej.has-text-justified: Wyjustowanie tekstu.is-capitalized: Wielka litera na początku każdego słowa.is-lowercase: Wszystko małymi literami.is-uppercase: Wszystko wielkimi literami
Kontener treści WYSIWYG
Użyj klasy .content do formatowania tekstu markdown lub treści z CMS:
<div class="content">
<h1>Tytuł główny</h1>
<p>Standardowy akapit z automatycznym skalowaniem typograficznym.</p>
<ul>
<li>Element listy punktowanej 1</li>
<li>Element listy punktowanej 2</li>
</ul>
</div>