asw-v01: 5 reference templates using data-layout and semantic HTML
- templates/index.html — landing/hero page with feature cards - templates/docs.html — docs layout with sidebar nav, content, and TOC - templates/article.html — long-form prose with code blocks and blockquotes - templates/dashboard.html — stats grid with system status panels - templates/tasks.html — vault-style task tracker with data-task attributes All templates use semantic HTML only, data-layout attributes for structure, zero class= for layout, and link to dist/asw.css.
This commit is contained in:
parent
8ba401ad5e
commit
0d1d75a22f
GPG key ID:
6EB37F7E6190AF1C
5 changed files with 656 additions and 0 deletions
173
templates/docs.html
Normal file
173
templates/docs.html
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Documentation — ASW</title>
|
||||
<meta name="description" content="ASW documentation: tokens, layout, and component reference.">
|
||||
<link rel="stylesheet" href="../dist/asw.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Site navigation bar -->
|
||||
<nav data-layout="spread">
|
||||
<a href="index.html" aria-label="ASW home"><strong>ASW</strong></a>
|
||||
<span data-layout="row">
|
||||
<a href="docs.html" aria-current="page">Docs</a>
|
||||
<a href="article.html">Blog</a>
|
||||
<a href="dashboard.html">Dashboard</a>
|
||||
<a href="tasks.html">Tasks</a>
|
||||
</span>
|
||||
</nav>
|
||||
|
||||
<!-- Docs layout: sidebar nav + main content + right TOC -->
|
||||
<div data-layout="docs">
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<nav data-nav="sidebar">
|
||||
<p><strong>Getting Started</strong></p>
|
||||
<ul>
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
<li><a href="#quick-start">Quick Start</a></li>
|
||||
<li><a href="#html-template">HTML Template</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Core Concepts</strong></p>
|
||||
<ul>
|
||||
<li><a href="#semantic-html">Semantic HTML</a></li>
|
||||
<li><a href="#data-layout">Data Layout</a></li>
|
||||
<li><a href="#tokens">Token System</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Layouts</strong></p>
|
||||
<ul>
|
||||
<li><a href="#flexbox">Flexbox Primitives</a></li>
|
||||
<li><a href="#grid">Grid Helpers</a></li>
|
||||
<li><a href="#docs-layout">Docs Layout</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Components</strong></p>
|
||||
<ul>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<article>
|
||||
<h1>Documentation</h1>
|
||||
|
||||
<section id="installation">
|
||||
<h2>Installation</h2>
|
||||
<p>Install ASW via npm:</p>
|
||||
<p data-layout="install"><code>npm install @agentic-semantic-web/asw</code></p>
|
||||
<p>Or link the built CSS directly in your HTML:</p>
|
||||
<p data-layout="install"><code><link rel="stylesheet" href="dist/asw.css"></code></p>
|
||||
</section>
|
||||
|
||||
<section id="quick-start">
|
||||
<h2>Quick Start</h2>
|
||||
<p>ASW is built on two rules:</p>
|
||||
<ol>
|
||||
<li>Use semantic HTML elements for structure.</li>
|
||||
<li>Use <code>data-layout</code> attributes for layout.</li>
|
||||
</ol>
|
||||
<p>No classes. No utility frameworks. No naming conventions.</p>
|
||||
</section>
|
||||
|
||||
<section id="semantic-html">
|
||||
<h2>Semantic HTML</h2>
|
||||
<p>Every page is built from meaningful landmarks:</p>
|
||||
<ul>
|
||||
<li><code><nav></code> — navigation blocks</li>
|
||||
<li><code><main></code> — primary content</li>
|
||||
<li><code><article></code> — self-contained content</li>
|
||||
<li><code><section></code> — grouped content</li>
|
||||
<li><code><header></code> — introductory content</li>
|
||||
<li><code><footer></code> — closing metadata</li>
|
||||
<li><code><aside></code> — complementary content</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="data-layout">
|
||||
<h2>Data Layout</h2>
|
||||
<p>Apply layout with <code>data-layout</code> attributes on any element:</p>
|
||||
<ul>
|
||||
<li><code>data-layout="row"</code> — horizontal flex with wrap</li>
|
||||
<li><code>data-layout="col"</code> — vertical flex</li>
|
||||
<li><code>data-layout="stack"</code> — vertical flex with larger gap</li>
|
||||
<li><code>data-layout="spread"</code> — space-between distribution</li>
|
||||
<li><code>data-layout="center"</code> — centred column</li>
|
||||
<li><code>data-layout="card-grid"</code> — responsive card grid</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="tokens">
|
||||
<h2>Token System</h2>
|
||||
<p>ASW uses native CSS custom properties (oklch color space) for all design tokens:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Token</th>
|
||||
<th>Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>--surface</code></td><td>Page background</td></tr>
|
||||
<tr><td><code>--text</code></td><td>Primary text colour</td></tr>
|
||||
<tr><td><code>--accent</code></td><td>Interactive accent</td></tr>
|
||||
<tr><td><code>--space-4</code></td><td>Standard spacing unit (1rem)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="flexbox">
|
||||
<h2>Flexbox Primitives</h2>
|
||||
<p>All flexbox layouts collapse to stacked at 640px viewport width via <code>@media (--compact)</code>.</p>
|
||||
<p data-layout="install"><code><div data-layout="spread">...</div></code></p>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Prev/Next navigation -->
|
||||
<nav data-role="prev-next">
|
||||
<a href="index.html" rel="prev">
|
||||
<small>← Previous</small>
|
||||
<span>ASW Home</span>
|
||||
</a>
|
||||
<a href="article.html" rel="next">
|
||||
<small>Next →</small>
|
||||
<span>Blog Article</span>
|
||||
</a>
|
||||
</nav>
|
||||
</article>
|
||||
|
||||
<!-- Right TOC -->
|
||||
<aside data-toc>
|
||||
<p><strong>On this page</strong></p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#installation">Installation</a></li>
|
||||
<li><a href="#quick-start">Quick Start</a></li>
|
||||
<li><a href="#semantic-html">Semantic HTML</a></li>
|
||||
<li><a href="#data-layout">Data Layout</a></li>
|
||||
<li><a href="#tokens">Token System</a></li>
|
||||
<li><a href="#flexbox">Flexbox</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer data-layout="spread">
|
||||
<small>© 2026 Agentic Semantic Web</small>
|
||||
<nav data-layout="row">
|
||||
<a href="docs.html">Docs</a>
|
||||
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue