Základ
Layout MultiWebu využívá mřížku o velikosti 8px, která je uložena v proměnné --base.
Nejběžnější násobky jsou pro praktičnost připraveny v separátních proměnných.
| Jméno | Proměnná | Velikost | |
|---|---|---|---|
| h | --base-h |
4px | |
| 1 | --base |
8px | |
| 1h | --base-1h |
12px | |
| 2 | --base-2 |
16px | |
| 3 | --base-3 |
24px | |
| 4 | --base-4 |
32px | |
| 5 | --base-5 |
40px | |
| 6 | --base-6 |
48px | |
| 7 | --base-7 |
56px | |
| 8 | --base-8 |
64px | |
| 9 | --base-9 |
72px | |
| 10 | --base-10 |
80px |
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) }
}