Skip to content

Layout

Responsive layout primitives — grid, sidebar, overflow, embed, cluster, sticky, and app shell.

Auto Grid

Auto-fit responsive grid — wraps at 18rem by default.

Column 1

Column 2

Column 3

<div class="fap-grid">
  <article><p>Column 1</p></article>
  <article><p>Column 2</p></article>
  <article><p>Column 3</p></article>
</div>

Sidebar layout

.fap-sidebar — flex-based sidebar + main content pattern.

Main content

Takes remaining space with minimum 55% width.

<div class="fap-sidebar">
  <aside>
    <p>Sidebar content</p>
  </aside>
  <div>
    <p>Main content — takes remaining space.</p>
  </div>
</div>

App shell layout

[data-app] on <body> — YouTube-style fixed viewport layout. Header auto-sizes, sidebar and main each scroll independently. This page uses it.

<body data-app>
  <nav data-sticky>header bar</nav>
  <div class="fap-sidebar">
    <aside>sidebar nav</aside>
    <main>content</main>
  </div>
</body>

Overflow wrapper

Wrap wide content (tables) in .fap-overflow for horizontal scrolling.

ABCDEFGH
12345678
 
<div class="fap-overflow">
  <table>
    <thead><tr><th>A</th><th>B</th><th>C</th>…</tr></thead>
    <tbody><tr><td>1</td><td>2</td><td>3</td>…</tr></tbody>
  </table>
</div>

Responsive embed

<div class="fap-embed">
  <iframe src="https://example.com" title="Embed"></iframe>
</div>

<!-- Aspect ratio variants -->
<div class="fap-embed" data-ratio="4:3">…</div>
<div class="fap-embed" data-ratio="1:1">…</div>

Cluster

.fap-cluster — flex wrap with gap.

<div class="fap-cluster">
  <button>One</button>
  <button data-secondary>Two</button>
  <button data-outline>Three</button>
  <button data-ghost>Four</button>
</div>

Sticky positioning

[data-sticky] makes any element sticky at the top of its scroll container.

<nav data-sticky>
  <strong>Brand</strong>
  <ul>…</ul>
</nav>