Internal · Layout reference
Grid Template Prime Material
Companion to the style guide. Every layout primitive the site ships — container, section padding, breakpoints, column patterns, hairline-grid technique, page composition — rendered with the real classes and tokens. Resize the browser to see patterns flip at each breakpoint.
01 · Overview
Why this exists
Three rules every new page should pass before it ships:
- Content sits inside
max-w-container(1100px) and centers viamx-auto. - Every section uses
px-section-x py-section-y(32px × 92px) — no ad-hoc padding. - Multi-column grids use the 1px-gap hairline technique (section 06), not borders.
Pick a section below to see the exact class strings + a live demo at the current viewport.
1100px max-width, centered. Every apex content route lives inside this rail.
92px top/bottom, 32px sides. The single vertical rhythm across the whole site.
1px gap on a colored backing — the brand's signature column divider. No card borders required.
02 · Container
Container — 1100px centered rail
Token: --container-max: 1100px · Tailwind: max-w-container mx-auto. On viewports wider than 1100px the surrounding rail is just the page background — content does not stretch.
Live: this card IS a max-w-container. The orange tick marks flag its left + right edges.
1100px max-width
Standard page width. Cap pinned in globals.css as --container-max and mirrored to Tailwind as maxWidth.container. Use the Tailwind class:
<div className="mx-auto max-w-container">…</div>
Long-form copy gets a tighter inner rail — max-w-prose = 720px — for readability. Used on paragraph-heavy sections (Rentals, Training, About).
03 · Padding
Section padding — 92px Y / 32px X
Tokens: --section-pad-y: 92px, --section-pad-x: 32px. Tailwind: py-section-y px-section-x. Every <section> uses these — no ad-hoc py-N / px-N on sections.
Section content
The band around this card IS the section padding at full token values. Every apex section renders inside this exact rhythm.
<section className="bg-canvas px-section-x py-section-y text-ink"> <div className="mx-auto max-w-container">…</div> </section>
04 · Breakpoints
Breakpoints — sm 640 / md 768 / lg 1024 / xl 1280
Tailwind defaults. The badge below is live: it tells you which breakpoint your current viewport is sitting in. Resize the browser to watch it flip.
| Prefix | Min width | Real device | What flips here in our code |
|---|---|---|---|
| (none) | < 640 | Mobile (375–639) | Default state. All grids single-column. Hero H1 uses the 34px mobile size. Hamburger menu only. |
| sm: | 640 | Large phone / small tablet | Few changes — color tokens grid goes from 2 → 3 cols. Hamburger still in effect (collapses at lg). |
| md: | 768 | Tablet (iPad portrait) | Major flip. Home industries pillars go 1 → 2 col. Hero H1 jumps to clamp(40,4.8vw,64) responsive scale. Schedule table desktop view kicks in. |
| lg: | 1024 | Laptop (iPad landscape) | Full nav appears (hamburger hidden). Color tokens grid 3 → 4 cols. ServicesGrid 2 → 3 cols. Container hits its 1100px max. |
| xl: | 1280 | Desktop / wide | Very little flips at xl — container is already capped at 1100px, so wider screens just gain whitespace rail on both sides. |
05 · Patterns
Grid column patterns
The grid layouts the codebase actually uses, with their exact class strings. Each demo renders at the current viewport — resize the browser to see them flip.
2-up · 1 col mobile → 2 cols md
Used by: IndustriesGrid (home), 2-col content layouts
grid grid-cols-1 gap-6 md:grid-cols-2
3-up hairline · 1 col mobile → 3 cols md (1px-gap)
Used by: Testimonials, ServicesGrid
grid grid-cols-1 gap-px bg-line md:grid-cols-3
6-up hairline · 1 col mobile → 2 sm → 3 lg
Used by: BrandRangesAccordion (/construction 6 Manitou categories inside the Manitou accordion item)
grid grid-cols-1 gap-px bg-line sm:grid-cols-2 lg:grid-cols-3
4-up swatch grid · 2 cols mobile → 3 sm → 4 lg
Used by: Style guide Color Tokens grid (10 swatches)
grid grid-cols-2 gap-px bg-line sm:grid-cols-3 lg:grid-cols-4
2×2 spec hairline · always 2 cols (no breakpoint flip)
Used by: ProductCard spec grids (working height / capacity / outreach / drive)
grid grid-cols-2 gap-px bg-line
—
Working height
—
Capacity
—
Outreach
—
Drive
06 · Hairline
1px-gap hairline grid technique
The brand's signature multi-column divider. Wrapper takes a colored background (bg-line on light surfaces, bg-white/10 on dark) plus gap-px; cells are bg-card. The 1px gap shows through as the divider — no per-cell border required.
Live (light surface):aerial-lifts/index.html lines 102, 166, 181 (.proof-grid / .fc-specs / .steps)
57 ft 7 in
Working height
8,818 lb
Capacity
42 ft 11 in
Max outreach
Live (dark surface) — same technique, bg-white/10 backing:
01
Tell us the job site, the unit, the dates.
02
Quote within 24 hours, delivered to your job site.
03
Operate on-time, supported by 80+ technicians.
<div className="grid grid-cols-3 gap-px bg-line"> <div className="bg-card p-4">…</div> <div className="bg-card p-4">…</div> <div className="bg-card p-4">…</div> </div>
07 · Composition
Page anatomy
The canonical apex-content composition. Every route follows this rhythm — header (chrome, fixed-position equivalent), hero, then N sections stacked, then footer. There's no inter-section margin: each section's own py-section-y is the gap.
Sections never carry their own top/bottom margin — adjacency is the divider. Surface alternation (canvas → card → ink → canvas) provides visual rhythm without spacers. PHASE 2A (2026-05-24): the prior "warm band" tier retired along with the canvas-warm token.