Layout System
The structural backbone of Jarvis. Governed by Law I & Law IV. Layouts are strictly separate from Components. We use CSS Grid, Flex, and intrinsic container units.
Primitives in Use
The fundamental layout bounds pattern: l-section, l-container, and l-stack.
.l-section
.l-container
.l-stack
The Page Shell Architecture
The canonical way to structure any Jarvis sub-application (like this very showroom!). Do not nest layout primitives recursively if possible.
<div class="pb-app-shell">
- Locks to 100vh
.page-sidebar
.main-area .l-page-content
.l-section
.l-section
Grid Layout Utilities
Responsive CSS Grids driven entirely by utility classes (`.u-grid`, `.u-grid-cols-*`). We favor CSS grids over 12-column flexbox systems.
Rule of Thumb: Use Grid for page-level structural alignment, use Flexbox inside of components to align children.
Spacing Tokens (The T-Shirt Scale)
Jarvis uses fluid spacing math. Measurements scale intrinsically based on container units (`cqi`) and viewport limits via `clamp()`.
| Token Variable | Visual Reference (Height/Gap mapping) | Utility Class Prefix |
|---|---|---|
--space-xxs
|
u-p-xxs / u-gap-xxs |
|
--space-xs |
u-p-xs / u-gap-xs |
|
--space-s |
u-p-s / u-gap-s |
|
--space-m
(The Default)
|
u-p-m / u-gap-m |
|
--space-l |
u-p-l / u-gap-l |
|
--space-xl |
u-p-xl / u-gap-xl |
|
--space-xxl
|
u-p-xxl / u-gap-xxl |
Layout Dividers (.l-divider)
Token-driven block elements used to separate content. Built as structure, not strictly a border.
Standard Horizontal
Strength Variants
.l-divider--strong
.l-divider--subtle
.l-divider--thick