Foundation
Grid & Layout
The Nexus grid is built on a 4pt baseline with column counts, gutters, and margins defined per viewport. Switch contexts below to browse the Desktop & Tablet, Mobile Application, and Admin Portal & Dashboard layouts.
Desktop & Tablet Layout
Web breakpoints from the 1920px X-Large desktop down to the 412px responsive mobile fallback. Desktop runs a 12-column grid, tablet steps to 6, and the narrow fallback collapses to a single column.
1. Desktop Browser (Extra Large) — 1920 Viewport
- Viewport
- 1920 × 1024
- Container
- 1440px
- Columns
- 12
- Gutter
- 32px
- Margin
- 24px
2. Desktop Browser (Large) — 1440 Viewport
- Viewport
- 1440 × 1024
- Container
- 1312px
- Columns
- 12
- Gutter
- 32px
- Margin
- 64px
3. Desktop Browser (Medium) — 1280 Viewport
- Viewport
- 1280 × 1024
- Container
- 1152px
- Columns
- 12
- Gutter
- 24px
- Margin
- 64px
4. Tablet Browser (Large) — 1024 Viewport
- Viewport
- 1024 × 1366
- Container
- 960px
- Columns
- 6
- Gutter
- 24px
- Margin
- 32px
5. Tablet Browser (Standard) — 768 Viewport
- Viewport
- 768 × 1024
- Container
- 720px
- Columns
- 6
- Gutter
- 24px
- Margin
- 24px
6. Mobile Browser (Responsive) — 412 Viewport
- Viewport
- 412 × 917
- Container
- 380px
- Columns
- 1
- Gutter
- 16px
- Margin
- 16px
Layout utilities
Apply these @utility classes from tokens.css to the outermost wrapper of each layout region.
layout-web-xllayout-web-lglayout-web-smlayout-tablet-lglayout-tablet-smlayout-web-mobile