Rozestup

Spacing určuje rozestupy a velikosti prvků v rozhraní. Cílem je konzistentní rytmus napříč celou aplikací.

Kdy použít

• Rozestupy mezi prvky v layoutu (gap, padding, margin).
• Vnitřní rytmus komponent (nadpis, obsah, akce).
• Definice velikostí ikon a jednoduchých geometrických prvků.

Jednotky

Pro layout se v praxi vychází ze 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 samostatný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 odsadit pomocí margin, padding nebo pozicování, 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) }
}