Documentation

Installation

Install ASW via npm:

npm install @agentic-semantic-web/asw

Or link the built CSS directly in your HTML:

<link rel="stylesheet" href="dist/asw.css">

Quick Start

ASW is built on two rules:

  1. Use semantic HTML elements for structure.
  2. Use data-layout attributes for layout.

No classes. No utility frameworks. No naming conventions.

Semantic HTML

Every page is built from meaningful landmarks:

  • <nav> — navigation blocks
  • <main> — primary content
  • <article> — self-contained content
  • <section> — grouped content
  • <header> — introductory content
  • <footer> — closing metadata
  • <aside> — complementary content

Data Layout

Apply layout with data-layout attributes on any element:

  • data-layout="row" — horizontal flex with wrap
  • data-layout="col" — vertical flex
  • data-layout="stack" — vertical flex with larger gap
  • data-layout="spread" — space-between distribution
  • data-layout="center" — centred column
  • data-layout="card-grid" — responsive card grid

Token System

ASW uses native CSS custom properties (oklch color space) for all design tokens:

Token Purpose
--surfacePage background
--textPrimary text colour
--accentInteractive accent
--space-4Standard spacing unit (1rem)

Flexbox Primitives

All flexbox layouts collapse to stacked at 640px viewport width via @media (--compact).

<div data-layout="spread">...</div>