Ludo
86464f3e21
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
77 lines
3 KiB
HTML
77 lines
3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include virtual="/_include/head.html" -->
|
|
<title>Accordion — ASW Examples</title>
|
|
<meta name="description" content="Collapsible sections via native
|
|
details and summary — no JavaScript">
|
|
</head>
|
|
<body>
|
|
<!--#include virtual="/_include/nav.html" -->
|
|
|
|
<main>
|
|
<header>
|
|
<h1>Accordion</h1>
|
|
<p data-text="lead">Collapsible sections via native details and
|
|
summary — no JavaScript</p>
|
|
</header>
|
|
|
|
<p>Native <code><details></code> and <code><summary></code>.
|
|
No JavaScript, no classes. Keyboard accessible by default.</p>
|
|
<h2 id="basic">Basic</h2>
|
|
<details>
|
|
<summary>What is ASW?</summary>
|
|
<p>A standalone CSS framework for agent-generated web content. Semantic HTML + data-attributes. Zero classes. One file.</p>
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Who is it for?</summary>
|
|
<p>LLMs and agents generating HTML. Also humans who prefer writing semantic markup over wrestling with class names.</p>
|
|
</details>
|
|
|
|
<details open>
|
|
<summary>Open by default</summary>
|
|
<p>Add the <code>open</code> attribute to show a section expanded on load. The user can still collapse it.</p>
|
|
</details>
|
|
|
|
<h2 id="grouped-accordion">Grouped accordion</h2>
|
|
<p>Adjacent <code><details></code> elements render as a group.
|
|
Each operates independently — all can be open simultaneously.</p>
|
|
<details>
|
|
<summary>Installation</summary>
|
|
<p>Add one <code><link></code> tag to your document head. No npm, no build step.</p>
|
|
<pre><code><link rel="stylesheet" href="/agentic.css"></code></pre>
|
|
</details>
|
|
<details>
|
|
<summary>Usage</summary>
|
|
<p>Write semantic HTML. ASW styles it. Use <code>data-*</code> attributes for layout patterns and variants. No classes required.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Customisation</summary>
|
|
<p>Override CSS custom properties to change colours, spacing, and typography.</p>
|
|
</details>
|
|
|
|
<h2 id="with-nested-content">With nested content</h2>
|
|
<p>Content inside <code><details></code> can be rich — code
|
|
blocks, lists, tables.</p>
|
|
<details>
|
|
<summary>Build commands</summary>
|
|
|
|
<div class="sourceCode" id="cb1"><pre
|
|
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> css <span class="co"># CSS layers → agentic.css</span></span>
|
|
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> site <span class="co"># content/**/*.md → built HTML</span></span>
|
|
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> all <span class="co"># both</span></span></code></pre></div>
|
|
</details>
|
|
|
|
<details>
|
|
<summary>Keyboard shortcuts</summary>
|
|
<ul>
|
|
<li><kbd>Enter</kbd> or <kbd>Space</kbd> — toggle open/close</li>
|
|
<li><kbd>Tab</kbd> — move focus to next interactive element</li>
|
|
</ul>
|
|
</details>
|
|
</main>
|
|
|
|
<!--#include virtual="/_include/footer.html" -->
|
|
</body>
|
|
</html>
|