trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: 5 reference templates using data-layout and semantic HTML

Browse source 
- 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:
Hannibal Smith 2026-06-07 10:50:20 +02:00
parent 8ba401ad5e
commit 0d1d75a22f
Signed by: hannibal
GPG key ID: 6EB37F7E6190AF1C
5 changed files with 656 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

83
templates/index.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASW — Agentic Semantic Web</title>
<meta name="description" content="A CSS framework for agent-generated web content. Semantic HTML + data attributes. Zero classes.">
<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">Docs</a>
<a href="article.html">Blog</a>
<a href="dashboard.html">Dashboard</a>
<a href="tasks.html">Tasks</a>
</span>
</nav>
<!-- Hero section -->
<header data-layout="hero">
<h1>Agentic Semantic Web</h1>
<p>A CSS framework for agent-generated web content.</p>
<p>Semantic HTML. Data attributes. Zero layout classes.</p>
<p data-layout="install"><code>npm install @agentic-semantic-web/asw</code></p>
<nav data-layout="actions">
<a href="docs.html" role="button">Get Started</a>
<a href="https://github.com/agentic-semantic-web/asw" target="_blank" rel="noopener">GitHub</a>
</nav>
</header>
<!-- Feature cards -->
<section data-layout="stack">
<h2>Why ASW?</h2>
<div data-layout="card-grid">
<article>
<h3>Semantic by Default</h3>
<p>Use meaningful HTML elements — <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code> — instead of generic <code>&lt;div&gt;</code> soup.</p>
</article>
<article>
<h3>Data Attributes for Layout</h3>
<p>Style with <code>data-layout</code> attributes, not CSS classes. Your markup describes its own structure.</p>
</article>
<article>
<h3>Zero Class Dependencies</h3>
<p>No utility class soup. No grid frameworks. No naming conventions to memorise.</p>
</article>
<article>
<h3>Built for Agents</h3>
<p>Designed from the ground up for LLM-generated HTML — the rules are simple enough for any agent to follow.</p>
</article>
</div>
</section>
<!-- CTA -->
<section data-layout="col center">
<h2>Ready to build?</h2>
<p>Link one CSS file, use semantic HTML and data-layout attributes.</p>
<nav data-layout="actions">
<a href="docs.html" role="button">Read the Docs</a>
</nav>
</section>
<!-- Footer -->
<footer data-layout="spread">
<small>&copy; 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>