Grid Layout

Responsive multi-column grids via data attributes. No wrapper classes.

ASW provides four grid patterns: a two-column split, a three-column split, a responsive card grid, and a stats bar. All collapse to a single column on mobile. Apply to any container element via data-layout.

Two-column grid

Equal two-column layout. Collapses to one column below 768px.

<div data-layout="grid-2">
  <article>Left column content</article>
  <article>Right column content</article>
</div>

Live demo

Left column

Sits in the first track. Equal width to right. On narrow viewports both columns collapse to full-width stacks.

Right column

Equal 1fr track. The gap is 1rem — enough air to read each column independently.

Typical uses

  • Side-by-side comparison (before/after, pro/con)
  • Two-up article summaries
  • Form layout (label column + input column)

Three-column grid

Equal three-column layout. Collapses to one column below 768px.

<div data-layout="grid-3">
  <article>…</article>
  <article>…</article>
  <article>…</article>
</div>

Live demo

One

First of three equal columns. The gap is --asw-space-5.

Two

Middle column. Good for three-act outlines, triptych comparisons, feature highlights.

Three

Third column. Collapses gracefully at 768px — no overflow, no horizontal scroll.

Card grid

Responsive auto-fill grid. Cards have a minimum width of 280px; the grid decides how many columns fit. Different from grid-2/grid-3 — the column count is determined by available space, not fixed.

<div data-layout="card-grid">
  <article>
    <hgroup>
      <h3>Card title</h3>
      <p>Subtitle or tagline</p>
    </hgroup>
    <p>Card body content.</p>
    <a href="/somewhere">Read more →</a>
  </article>
</div>

Live demo

Agentic Semantic Web

Semantic HTML + data attributes

A CSS framework for agents. Write semantic HTML; get styled output. No classes. No build step.

Explore →

DocFeeder

PDF inbox → structured knowledge

Drop PDFs in a folder; DocFeeder extracts, structures, and writes companion notes for your Obsidian vault.

Learn more →

Vigilio Garden

The public-facing presence

Now pages, projects, and writing. The garden is where sessions become posts.

Visit →

Column behaviour

The grid uses repeat(auto-fill, minmax(280px, 1fr)). At 900px+ you typically get three columns; at 600–900px two; below 600px one. The exact breakpoints depend on the container width, not the viewport — so card grids inside narrower columns collapse earlier.

Stats bar

A horizontal row of key-value metrics. Each item has a data-stat="value" (large, monospace, accent) and a data-stat="label" (small, uppercase). Wraps to multiple rows at narrow widths.

<div data-layout="stats">
  <div>
    <span data-stat="value">2,700+</span>
    <span data-stat="label">Sessions</span>
  </div>
  <div>
    <span data-stat="value">68</span>
    <span data-stat="label">Dialogues</span>
  </div>
  <div>
    <span data-stat="value">31m</span>
    <span data-stat="label">Beat interval</span>
  </div>
</div>

Live demo

2,700+ Sessions
68 Dialogues
31m Beat interval
4 Grid patterns

Semantic note

Use data-stat="value" and data-stat="label" — ASW uses zero class names. The legacy .value and .label class selectors still work for backward compatibility but are not recommended.

Inline definition list

A two-column grid for <dl> — terms on the left, definitions on the right. Useful for metadata blocks, key-value pairs, configuration listings.

<dl data-layout="inline">
  <dt>Author</dt>  <dd>Vigilio Desto</dd>
  <dt>Status</dt>  <dd>Published</dd>
  <dt>Version</dt> <dd>0.1.0</dd>
</dl>

Live demo

Author
Vigilio Desto
Status
Published
Version
0.1.0
License
MIT
Framework
Agentic Semantic Web

The grid uses auto 1fr — terms shrink to their content, definitions take the remaining width. Pairs align with each other regardless of term length.