104 lines
3.9 KiB
Markdown
104 lines
3.9 KiB
Markdown
# Layouts catalog
|
||
|
||
Every layout lives in `templates/single-page/<name>.html` as a fully
|
||
functional standalone page with realistic demo data. Open any file directly
|
||
in Chrome to see it working.
|
||
|
||
To compose a new deck: open the file, copy the `<section class="slide">…</section>`
|
||
block (or multiple blocks) into your deck HTML, and replace the demo data.
|
||
Shared CSS (base, theme, animations) is already wired by `deck.html`.
|
||
|
||
## Openers & transitions
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `cover.html` | Deck cover. Kicker + huge title + lede + pill row. |
|
||
| `toc.html` | Table of contents. 2×3 grid of numbered cards. |
|
||
| `section-divider.html` | Big numbered section break (02 · Theme). |
|
||
|
||
## Text-centric
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `bullets.html` | Classic bullet list with card-wrapped items. |
|
||
| `two-column.html` | Concept + example side by side. |
|
||
| `three-column.html` | Three equal pillars with icons. |
|
||
| `big-quote.html` | Full-bleed pull quote in editorial-serif style. |
|
||
|
||
## Numbers & data
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `stat-highlight.html` | One giant number + subtitle (uses `.counter` animation). |
|
||
| `kpi-grid.html` | 4 KPIs in a row with up/down deltas. |
|
||
| `table.html` | Data table with hover rows, right-aligned numerics. |
|
||
| `chart-bar.html` | Chart.js bar chart, theme-aware colors. |
|
||
| `chart-line.html` | Chart.js dual-line chart with filled area. |
|
||
| `chart-pie.html` | Chart.js doughnut + takeaways card. |
|
||
| `chart-radar.html` | Chart.js radar comparing 2 products on 6 axes. |
|
||
|
||
## Code & terminal
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `code.html` | Syntax-highlighted code via highlight.js (JS example). |
|
||
| `diff.html` | Hand-rolled +/- diff view. |
|
||
| `terminal.html` | Terminal window mock with traffic-light header. |
|
||
|
||
## Diagrams & flows
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `flow-diagram.html` | 5-node pipeline with arrows and one highlighted node. |
|
||
| `arch-diagram.html` | 3-tier architecture grid. |
|
||
| `process-steps.html` | 4 numbered steps in cards. |
|
||
| `mindmap.html` | Radial mindmap with SVG path-draw animation. |
|
||
|
||
## Plans & comparisons
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `timeline.html` | 5-point horizontal timeline with dots. |
|
||
| `roadmap.html` | 4-column NOW / NEXT / LATER / VISION. |
|
||
| `gantt.html` | 12-week gantt chart with 5 parallel tracks. |
|
||
| `comparison.html` | Before vs After two-panel card. |
|
||
| `pros-cons.html` | Pros and cons two-card layout. |
|
||
| `todo-checklist.html` | Checklist with checked/unchecked states. |
|
||
|
||
## Visuals
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `image-hero.html` | Full-bleed hero with Ken Burns gradient background. |
|
||
| `image-grid.html` | 7-cell bento grid with gradient placeholders. |
|
||
|
||
## Closers
|
||
|
||
| file | purpose |
|
||
|---|---|
|
||
| `cta.html` | Call-to-action with big gradient headline + buttons. |
|
||
| `thanks.html` | Final "Thanks" page with confetti burst. |
|
||
|
||
## Picking a layout
|
||
|
||
- **Opener**: `cover.html`, often followed by `toc.html`.
|
||
- **Section break**: `section-divider.html` before every major section.
|
||
- **Core content**: `bullets.html`, `two-column.html`, `three-column.html`.
|
||
- **Show numbers**: `stat-highlight.html` (single) or `kpi-grid.html` (4-up).
|
||
- **Show plot**: `chart-bar.html` / `chart-line.html` / `chart-pie.html` / `chart-radar.html`.
|
||
- **Show a diff or change**: `comparison.html`, `diff.html`, `pros-cons.html`.
|
||
- **Show a plan**: `timeline.html`, `roadmap.html`, `gantt.html`, `process-steps.html`.
|
||
- **Show architecture**: `arch-diagram.html`, `flow-diagram.html`, `mindmap.html`.
|
||
- **Code / demo**: `code.html`, `terminal.html`.
|
||
- **Closer**: `cta.html` → `thanks.html`.
|
||
|
||
## Naming / structure conventions
|
||
|
||
- Each slide is `<section class="slide" data-title="...">`.
|
||
- Header pills: `<p class="kicker">…</p>`, eyebrow: `<p class="eyebrow">…</p>`.
|
||
- Titles: `<h1 class="h1">…</h1>` / `<h2 class="h2">…</h2>`.
|
||
- Lede: `<p class="lede">…</p>`.
|
||
- Cards: `<div class="card">…</div>` (variants: `card-soft`, `card-outline`, `card-accent`).
|
||
- Grids: `.grid.g2`, `.grid.g3`, `.grid.g4`.
|
||
- Notes: `<div class="notes">…</div>` per slide.
|