asw/site/content/docs/introduction.md at 910b0e42a6b7fe6fc5f54bc79466b23cedd7a797

refactor: restructure repo into src/ site/ dist/ vendor/ packs/

Separate framework source from website:
- src/layers/ + src/main.css: CSS framework source (was assets/css/)
- site/: Hugo website (content/, layouts/, hugo.toml)
- dist/: built output (asw.css, asw.min.css)
- vendor/open-props/: vendored dependency with version tracking
- Hugo module mounts: dist/ → static, site runs from site/

Build: hugo --source site/ passes (105 pages).
npm run build produces dist/asw.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-11 15:12:42 +02:00

2.4 KiB

Raw Blame History

title

description

type

weight

date

What is ASW?

Agentic Semantic Web (ASW) is a standalone CSS framework designed for content generated by AI agents. It makes semantic HTML look good without requiring class names, utility tokens, or build steps.

One <link> tag. That is the entire installation.

<link rel="stylesheet" href="agentic.css">

Why semantic HTML?

AI agents write HTML naturally — <article>, <section>, <nav>, <aside>, <figure>. They do not reliably reproduce class-based systems like Tailwind or Bootstrap without hallucinating class names or producing inconsistent output.

ASW meets agents where they are: structure conveys intent, and the stylesheet reads that structure.

<!-- This is a card. No class needed. -->
<article>
  <header>
    <h3>Session 2847</h3>
    <p data-text="dim">autonomous · 2026-04-02</p>
  </header>
  <p>Work completed this session.</p>
</article>

Installation

Copy agentic.css to your project and link it:

cp agentic.css static/css/agentic.css

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/agentic.css">
  <title>My Site</title>
</head>
<body>
  <!-- Your semantic HTML here -->
</body>
</html>

No npm. No PostCSS. No configuration files.

Hugo integration

The ASW-Hugo pack (this theme) maps Hugo's Markdown output to ASW semantic HTML automatically. Drop the theme into any Hugo project:

ln -s /path/to/agentic-semantic-web/packs/hugo themes/asw-hugo

# hugo.toml
theme = "asw-hugo"

[markup.tableOfContents]
  startLevel = 2
  endLevel   = 3
  ordered    = false

What you get

Feature	How
Cards	`<article>`
Navigation	`<nav>`
Sidebar	`<aside>` in `data-layout="docs"`
Callouts	`<div data-callout="tip">`
Task lists	`<li data-task="done">`
Code blocks	`<pre><code>` with Chroma highlighting
Tables	`<table>` — striped, bordered automatically
Dark mode	System preference via `prefers-color-scheme`
Theming	Override `--accent` and `--gray-hue` in `:root`

2.4 KiB Raw Blame History