Foundations
Layout
Stance breakpoints, container widths and layout principles for mobile-first, intrinsic layouts that reflow cleanly from 320px to wide desktops.
Stance provides layout primitives (Box, Stack, Inline, Grid, Container) and leaves page composition to each product. Binds and eSignify keep their own shells.
Breakpoints
| Name | Min width | Typical use |
|---|---|---|
sm | 640px | Large phones |
md | 768px | Tablets, collapsed sidebars |
lg | 1024px | Laptops, persistent sidebars |
xl | 1280px | Desktops |
2xl | 1536px | Wide desktops |
CSS custom properties can’t be used inside media queries, so use the values directly:
@media (min-width: 1024px) { /* lg */ }Containers
--st-size-container-sm: 40rem (640px)--st-size-container-md: 55rem (880px)--st-size-container-lg: 77.5rem (1240px)--st-size-container-xl: 90rem (1440px)
Container gutters scale with the viewport: 16px on phones, 24px on tablets, 40px on desktops.
Layout principles
- Design for a 320px viewport first; nothing may scroll horizontally except data tables, which scroll inside a labelled region.
- Prefer intrinsic layouts (
auto-fitgrids, wrapping inline groups) over breakpoint-specific rules. - Overlays adapt: dialogs become bottom sheets under 640px, and drawers never exceed the viewport width.