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)
136 lines
3.3 KiB
HTML
136 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include virtual="/_include/head.html" -->
|
|
<title>Tables — ASW Examples</title>
|
|
<meta name="description" content="Semantic table — no classes, no
|
|
wrappers, styled by default">
|
|
</head>
|
|
<body>
|
|
<!--#include virtual="/_include/nav.html" -->
|
|
|
|
<main>
|
|
<header>
|
|
<h1>Tables</h1>
|
|
<p data-text="lead">Semantic table — no classes, no wrappers,
|
|
styled by default</p>
|
|
</header>
|
|
|
|
<p>Every <code><table></code> is styled automatically. No class
|
|
required. Headers in accent monospace. Rows stripe on hover.</p>
|
|
<h2 id="basic-table">Basic table</h2>
|
|
<table>
|
|
<thead>
|
|
<tr class="header">
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="odd">
|
|
<td><code>data-text</code></td>
|
|
<td><code>string</code></td>
|
|
<td>—</td>
|
|
<td>Text utility — <code>mono</code>, <code>dim</code>,
|
|
<code>accent</code>, <code>small</code></td>
|
|
</tr>
|
|
<tr class="even">
|
|
<td><code>data-layout</code></td>
|
|
<td><code>string</code></td>
|
|
<td>—</td>
|
|
<td>Layout pattern — <code>prose</code>, <code>grid-2</code>,
|
|
<code>docs</code>, etc.</td>
|
|
</tr>
|
|
<tr class="odd">
|
|
<td><code>data-callout</code></td>
|
|
<td><code>string</code></td>
|
|
<td>—</td>
|
|
<td>Callout type — <code>note</code>, <code>tip</code>,
|
|
<code>warning</code>, <code>error</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="with-caption">With caption</h2>
|
|
<p>A <code><caption></code> titles the table for screen
|
|
readers.</p>
|
|
<table>
|
|
<caption>ASW nav patterns and their data attributes</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Pattern</th>
|
|
<th>Attribute</th>
|
|
<th>Active state</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Top nav</td>
|
|
<td><span data-text="dim">(none)</span></td>
|
|
<td><code>aria-current="page"</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sub-nav</td>
|
|
<td><code>data-subnav</code></td>
|
|
<td><code>aria-current="page"</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sidebar nav</td>
|
|
<td><code>data-nav="sidebar"</code></td>
|
|
<td><code>aria-current="page"</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>TOC nav</td>
|
|
<td><code>data-nav="toc"</code></td>
|
|
<td><code>aria-current="true"</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2 id="wide-table-overflow">Wide table (overflow)</h2>
|
|
<p>Wide tables scroll horizontally on narrow viewports. No wrapper
|
|
needed.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Token</th>
|
|
<th>Value (dark)</th>
|
|
<th>Value (light)</th>
|
|
<th>Usage</th>
|
|
<th>CSS variable</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>--asw-bg</code></td>
|
|
<td><code>#0d1117</code></td>
|
|
<td><code>#ffffff</code></td>
|
|
<td>Page background</td>
|
|
<td><code>background-color: var(--asw-bg)</code></td>
|
|
<td>Root surface</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--asw-text</code></td>
|
|
<td><code>#e6edf3</code></td>
|
|
<td><code>#1f2328</code></td>
|
|
<td>Body text</td>
|
|
<td><code>color: var(--asw-text)</code></td>
|
|
<td>High contrast</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--asw-accent</code></td>
|
|
<td><code>#3fb950</code></td>
|
|
<td><code>#1a7f37</code></td>
|
|
<td>Interactive, active</td>
|
|
<td><code>color: var(--asw-accent)</code></td>
|
|
<td>GitHub green</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
|
|
<!--#include virtual="/_include/footer.html" -->
|
|
</body>
|
|
</html>
|