Layout
Layout controls how Senco screens are structured and how content reflows across screen sizes.
Grid system
Column-based responsive grid that adapts across breakpoints. Content reflows — it never shrinks.
| Breakpoint | Width | Columns | Gutter | Margin |
|---|---|---|---|---|
| Mobile | < 600px | 4 | 16px | 16px |
| Tablet | 600–1023px | 8 | 16px | 24px |
| Desktop | 1024–1439px | 12 | 24px | 32px |
| Wide | >= 1440px | 12 | 24px | auto (max 1400px) |
Responsive grid — columns, gutters, margins
1024–1439px
32px
24px
Breakpoint
1024–1439px
Columns
12
Gutter
24px
space-5
Margin
32px
space-6
Container
Fluid
Column spanning
Sidebar (3) + content area (9) with 3-column card grid.
Containers
| Type | Behavior | Usage |
|---|---|---|
| Fluid | Fills available width | Full-width sections |
| Constrained | Max-width with centered content | Default content pages |
| Full-bleed | Edge-to-edge, ignores page padding | Hero banners, backgrounds |
Do / Don't
Do
Content centered in a constrained container with margins. Comfortable reading.
Don't
Content stretches edge-to-edge. Line lengths become unreadable on wide screens.
Layout primitives
| Primitive | Purpose |
|---|---|
| Container | Constrain content width and apply horizontal padding |
| Grid | Arrange content in responsive columns |
Header and Footer are template-level regions — see Templates > Basic page.
Responsive principles
- Mobile-first approach — base styles are mobile, enhance with breakpoints
- Navigation adapts: stacked on mobile, sidebar on desktop
- Touch targets meet 48px minimum on mobile
- Column spanning changes per breakpoint (e.g., 3-col cards on desktop stack to single column on mobile)
Design and accessibility
- Use semantic landmarks (
header,main,footer,nav) - Grid does not break reading order for screen readers
- Container does not trap keyboard focus