Breakpoints and layers
Breakpoints
Merid uses two breakpoints, in CSS only. Components adapt to the space they have; there is no JavaScript breakpoint API.
| Width | What changes |
|---|---|
| 920px and below | Multi-column layouts collapse; section padding drops to 80px. |
| 640px and below | Mobile pass: gutter becomes 20px, section padding 64px, dialogs become bottom sheets. |
Custom properties cannot be used inside media queries, so the values are written out:
@media (max-width: 920px) { /* layout collapse */ }
@media (max-width: 640px) { /* mobile pass */ }Coarse pointers
On touch screens (pointer: coarse), controls grow to be easier to hit: the default button becomes 48px tall, inputs 50px and segmented pills 40px.
Z-index scale
| Token | Value | Use |
|---|---|---|
--mrd-z-sticky | 50 | Sticky headers and toolbars |
--mrd-z-overlay | 100 | Dialogs, drawers and their backdrops |
--mrd-z-popover | 105 | Popovers, menus and select lists, above overlays so they work inside dialogs |
--mrd-z-toast | 110 | Toasts, above overlays |
--mrd-z-tooltip | 120 | Tooltips, above everything |
Use these tokens instead of arbitrary numbers so your own layers stack predictably with Merid's.