Rozestup

Jedná se základní jednotky pro prvky uživatelského rozhraní. Slouží k uspořádání prvků tak, aby byly přehledné a snadno použitelné. Rozestupy by měly být konzistentní a přizpůsobeny velikosti a typu prvků.

Jednotky

Pro layout se v praxi odvíjí od základu o velikosti 8px, který je uložen v proměnné --base. Nejběžnější násobky jsou pro praktičnost připraveny v separátních proměnných.

Proměnná	Velikost	Ukázka
--base-h	4 px
--base	8 px
--base-1h	12 px
--base-2	16 px
--base-2h	20 px
--base-3	24 px
--base-4	32 px
--base-5	40 px
--base-6	48 px
--base-7	56 px
--base-8	64 px
--base-9	72 px
--base-10	80 px

Odsazení

Ať už potřebujete elementy odstadit pomocí marginu, paddingu nebo pozicováním, využijte base.

.cities {
  gap: var(--base-2);
}

.city {
  padding: var(--base-2);
  gap: var(--base);
}

Velikost

Aby elementy vizuálně zapadly do mřížky, definujte jejich velikosti násobky její jednotky.

<div class="foo"></div>
<div class="foo foo--2x"></div>
<div class="foo foo--4x"></div>
<div class="foo foo--6x"></div>
<div class="foo foo--8x"></div>
<div class="foo foo--16x"></div>

.foo {
   --size: var(--base);

   width: var(--size);
   aspect-ratio: 1;

   &--2x  { --size: var(--base-2) }
   &--4x  { --size: var(--base-4) }
   &--6x  { --size: var(--base-6) }
   &--8x  { --size: var(--base-8) }
   &--16x { --size: calc(var(--base) * 16) }
}