- 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.
83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<!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><nav></code>, <code><main></code>, <code><article></code>, <code><section></code> — instead of generic <code><div></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>© 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>
|