Kapitoly knihovny stylů

→ Všechny helpery jsou v helpers/

Layout

→ helpers/flexbox.scss a helpers/widths-heights.scss

Layout tvoříme dvěmi základními třídami: .row pro sloupec layoutu. .col pro položku layoutu. Vevnitř je to klasicky flexbox: 

<div class="row">
<div class="col">…</div>
<div class="col">…</div>
</div>

.col má výchozí šířku 100%, což je výhodné kvůli výchozímu stylován pro nejmenší displeje. Pro pravidelný layout na větších displejích je potřeba použít helpery pro rozměry: 

<div class="row">
<div class="col w-50-sm">…</div>
<div class="col w-50-sm">…</div>
</div>

Občas je také potřeba změnit vnitřní okraje. Výchozí je 1rem. Pro změnu opět použijeme helper třídy.

Nepoužíváme žádnou pravidelnou mřížku, stránku prostě dělíme na 2, 3 nebo 4 sloupce pomocí helper tříd.

Vnější a vnitřní okraje (margin/padding)

→ helpers/margins-paddings.scss

  • Používáme „Emmet“ zkratky: např. třída mb-0 pro margin-bottom: 0.
  • Stupnice hodnot je podle jednotek rem. Například třída mb-15 pro margin-bottom: 1.5rem. Možné hodnoty jsou: 0.5, 1, 1.5, 2 a 3.
  • Kvůli velikosti souboru negenerujeme všechny možnosti. Prostě do SCSS souboru připíšeme novou, jakmile ji budeme potřebovat.