Ludo
5bf233348d
Specs: repo-structure, 10 framework layer specs, packs, site. Changes: repo-restructure (10 tasks), css-refactor (12 tasks), legacy-import (proposal + triage categories). Supersede docs/css-refactor-plan.md in favor of OpenSpec change. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
# Spec: Layouts (Layer 11)
|
|
|
|
File: `src/layers/11-layout.css`
|
|
|
|
## Purpose
|
|
|
|
Page-level layout systems. Controls how landmarks arrange on the page. Selected via `data-layout` attribute.
|
|
|
|
## Layout Types
|
|
|
|
### `data-layout="docs"` — Documentation
|
|
Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.
|
|
|
|
### `data-layout="console"` — Console
|
|
Docs variant: sidebar flush to viewport edge. Prototype — not yet used in production.
|
|
|
|
### `data-layout="grid-2"` / `data-layout="grid-3"` — Grids
|
|
Multi-column content grids for cards, galleries, dashboards.
|
|
|
|
### Essay layout
|
|
Long-form prose with table of contents. Wider reading measure, typographic refinements.
|
|
|
|
### Prose width
|
|
`--width-prose` constrains content to readable line length within any layout.
|
|
|
|
## Scope
|
|
|
|
### In scope
|
|
- `data-layout` attribute styling
|
|
- Prose width constraints
|
|
- Responsive layout breakpoints
|
|
- Essay/long-form layout variant
|
|
|
|
### Out of scope
|
|
- Landmark styling within layouts (→ landmarks layer)
|
|
- Navigation behavior within layouts (→ navigation layer)
|
|
|
|
## Constraints
|
|
|
|
- References only semantic aliases from `01-tokens.css`
|
|
- Layouts must degrade gracefully on mobile (single column)
|
|
- No layout should require JavaScript
|