Responsywność
Responsywność w StyleBuilderze realizowana jest za pomocą specjalnego prefiksu klasy nazywanego breakpointem, który pozwala stosować wybrane klasy dopiero od określonej szerokości ekranu.
Breakpoints
Breakpoints pozwalają stosować klasy warunkowo dla określonych rozmiarów ekranu. Dzięki temu możesz zmieniać układ i zachowanie elementów bezpośrednio w znacznikach HTML.
| Prefix | Minimalna szerokość ekranu |
|---|---|
sm: |
576px |
md: |
768px |
lg: |
992px |
xl: |
1200px |
xxl: |
1400px |
Prefixy breakpointów można stosować dla wszystkich klas, chyba że w dokumentacji wskazano inaczej.
Mobile First
StyleBuilder wykorzystuje podejście Mobile First. Oznacza to, że klasy bez breakpointu działają na wszystkich rozmiarach ekranu, natomiast klasy poprzedzone breakpointem zaczynają działać od wskazanego progu i pozostają aktywne również na większych ekranach.
Przykładowo klasa flex-column (układa elementy w pionie) zostanie zastosowana na każdym urządzeniu, natomiast md:flex-row (układa elementy w poziomie) zacznie działać dopiero od breakpointu md.
<div class="d-flex flex-column md:flex-row gap-4">
<div class="b">block</div>
<div class="b">block</div>
<div class="b">block</div>
</div>Stylowanie dla urządzeń mobilnych
Najczęstszym źródłem nieporozumień jest założenie, że breakpoint odpowiada konkretnemu rozmiarowi ekranu. W praktyce breakpoint określa moment, od którego dana klasa zaczyna obowiązywać.
Jeżeli chcesz zdefiniować zachowanie dla urządzeń mobilnych, użyj klasy bez breakpointu. Breakpointy stosuj wyłącznie wtedy, gdy element ma zachowywać się inaczej na większych ekranach.