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-28112px

Layout token'ları

TokenDeğerKullanım
--mrd-container1160pxEn fazla içerik genişliği
--mrd-gutter24px, 640px ve altında 20pxYatay sayfa padding'i
--mrd-section112px, 920px'te 80px, 640px'te 64pxDikey bölüm padding'i
--mrd-prose720pxEn 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 gap kullan.