Patterns

Layout Patterns

The compositions that turn components into a product. Start every new Across app from the app shell, and lay out content with the four spacing-only layout primitives.

App Shell

Starting point

The product backbone: a persistent Obsidian tool rail, a topbar, and the warm-paper workspace. The active rail item carries a wing-wipe edge; one accent per surface. The live reference is Orbit Across.

Orbit
Currency
Clocks
Weather
Workspace / Tools / Currency
Convert between any pair
Structure
<div class="shell">                  <!-- app grid: rail + main -->
  <aside class="rail">…</aside>       <!-- persistent Obsidian tool rail -->
  <div class="main">
    <header class="topbar">…</header> <!-- breadcrumbs · search · actions -->
    <main class="stage">…</main>      <!-- warm-paper workspace -->
  </div>
</div>

Layout Primitives

.across-stack · .across-cluster · .across-center · .across-grid-auto

Four spacing-only helpers — gap-driven, no margins. They compose any layout without bespoke CSS.

.across-cluster — horizontal, wraps, gap
gap
.across-grid-auto — responsive auto-fill
Track
Orbit
Relay
HTML
<div class="across-stack across-stack--3">…</div>        <!-- vertical, 12px gap -->
<div class="across-cluster across-cluster--between">…</div> <!-- row, space-between -->
<div class="across-center across-center--text">…</div>    <!-- grid place-items center -->
<div class="across-grid-auto">…</div>             <!-- responsive auto-fill cards -->

Horizontal Scroller

.across-hscroll

A single-row scroller with edge fades and caret nudges — for chip rows and toolbars too wide for their rail. Auto-wired by primitives.js: the carets appear only when there's more to see.

HTML
<div class="across-hscroll">
  <button class="across-hscroll__edge across-hscroll__edge--left"><i class="ph-light ph-caret-left"></i></button>
  <div class="across-hscroll__scroll">…items…</div>
  <button class="across-hscroll__edge across-hscroll__edge--right"><i class="ph-light ph-caret-right"></i></button>
</div>