e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
---
|
|
title: "Layouts"
|
|
description: "Available page layouts in ASW. Each card links to a live page using that layout."
|
|
---
|
|
|
|
## Available Layouts
|
|
|
|
<section data-layout="grid-2">
|
|
|
|
<article>
|
|
<header><h3>Docs</h3></header>
|
|
<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
|
|
<p><code>data-layout="docs"</code></p>
|
|
<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Essay</h3></header>
|
|
<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
|
|
<p><code>type: essay</code></p>
|
|
<p><a href="/essays/on-semantic-html/">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Console</h3></header>
|
|
<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
|
|
<p><code>data-layout="console"</code></p>
|
|
<p><em>Prototype — demo coming</em></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Grid</h3></header>
|
|
<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
|
|
<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
|
|
<p><em>This page uses grid-2 for these cards</em></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Prose</h3></header>
|
|
<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
|
|
<p><code>data-layout="prose"</code></p>
|
|
<p><a href="/examples/layout/prose.html">See it live →</a></p>
|
|
</article>
|
|
|
|
<article>
|
|
<header><h3>Report</h3></header>
|
|
<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
|
|
<p><code>data-layout="report"</code></p>
|
|
<p><a href="/examples/layout/report.html">See it live →</a></p>
|
|
</article>
|
|
|
|
</section>
|