Rozestup

Obdobně jako layout, má také odsazení elementů a jejich velikosti pro zachování konzistence svá pravidla.

Grid

Layout MultiWebu využívá mřížku o velikosti 8px, která je uložena v proměnné --base.

Užitečné

Nejběžnější násobky jsou pro praktičnost připraveny v separátních proměnných.

var(--base)    // Základ

var(--base-h)  // 0.5x
var(--base-1h) // 1.5x
var(--base-2)  // 2x
var(--base-3)
var(--base-4)
var(--base-5)
var(--base-6)
var(--base-7)
var(--base-8)
var(--base-9)
var(--base-10)

Odsazení

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

<div class="container">
  <div class="card"></div>
</div>
  .
  .
  .
<div class="container">
  <div class="card"></div>
</div>

.container {
  padding: 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--12x"></div>
<div class="foo foo--20x"></div>

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

  height: var(--size);
  width:  var(--size);
 
  &--2x  { --size: var(--base-2) }
  &--4x  { --size: var(--base-4) }
  &--6x  { --size: var(--base-6) }
  &--8x  { --size: var(--base-8) }
  &--12x { --size: calc(var(--base) * 12) }
  &--20x { --size: calc(var(--base) * 20) }
}

design

Rozestup#