Boşluk
Boşluklar 4px'lik bir taban ve 8px'lik bir ritim üzerine kurulur. Ölçek bazı adımları bilerek atlar: daha az seçenek, daha tutarlı layout demektir.
Ölçek
--mrd-space-14px--mrd-space-28px--mrd-space-312px--mrd-space-416px--mrd-space-520px--mrd-space-624px--mrd-space-728px--mrd-space-832px--mrd-space-1040px--mrd-space-1456px--mrd-space-1664px--mrd-space-1872px--mrd-space-28112pxLayout token'ları
| Token | Değer | Kullanım |
|---|---|---|
--mrd-container | 1160px | En fazla içerik genişliği |
--mrd-gutter | 24px, 640px ve altında 20px | Yatay sayfa padding'i |
--mrd-section | 112px, 920px'te 80px, 640px'te 64px | Dikey bölüm padding'i |
--mrd-prose | 720px | En fazla okuma genişliği |
Kurallar
- Ferahlığı tercih et. Bölümler çizgi ya da kutuyla değil, cömert padding'le ayrılır.
- Bir component'in içindeki boşluk, component'ler arasındaki boşluktan küçüktür.
- Kart padding'i
--mrd-space-7(28px), dialog padding'i--mrd-space-8(32px). - Flex ve grid container'larında child'lara margin vermek yerine
gapkullan.