Breakpoint'ler ve layer'lar
Breakpoint'ler
Merid yalnızca CSS'te iki breakpoint kullanır. Component'ler sahip oldukları alana uyum sağlar; JavaScript tarafında bir breakpoint API'si yoktur.
| Genişlik | Ne değişir |
|---|---|
| 920px ve altı | Çok kolonlu layout'lar tek kolona iner; bölüm padding'i 80px'e düşer. |
| 640px ve altı | Mobil düzen: gutter 20px, bölüm padding'i 64px olur, dialog'lar alttan açılan panele (bottom sheet) dönüşür. |
Custom property'ler media query içinde kullanılamadığı için değerler açıkça yazılır:
@media (max-width: 920px) { /* layout tek kolona iner */ }
@media (max-width: 640px) { /* mobil düzen */ }Dokunmatik ekranlar
Dokunmatik ekranlarda (pointer: coarse) kontroller daha kolay dokunulsun diye büyür: varsayılan buton 48px, input'lar 50px, segmented pill'ler 40px yüksekliğe çıkar.
Z-index ölçeği
| Token | Değer | Kullanım |
|---|---|---|
--mrd-z-sticky | 50 | Sticky header'lar ve toolbar'lar |
--mrd-z-overlay | 100 | Dialog'lar, drawer'lar ve arka plan örtüleri |
--mrd-z-popover | 105 | Popover'lar, menüler ve select listeleri; dialog içinde de çalışsınlar diye overlay'lerin üstünde |
--mrd-z-toast | 110 | Toast'lar, overlay'lerin üstünde |
--mrd-z-tooltip | 120 | Tooltip'ler, her şeyin üstünde |
Kendi layer'ların Merid'inkilerle öngörülebilir biçimde üst üste binsin diye rastgele sayılar yerine bu token'ları kullan.