e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
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>
|