App Shell
A top-level page scaffold that wires app chrome together with named slots for header, sidebar, footer, and main content in a CSS grid layout.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
sidebar-collapsed | boolean | — | Hides or narrows the sidebar |
sidebar-width | string | 16rem | Desktop sidebar width as a CSS length |
header-height | string | 3.5rem | Header row height as a CSS length |
fixed-header | boolean | — | Makes the header sticky at the top |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/app-shell.js"></script>import "./pura/lib/app-shell.js";