Starter

Five steps, no installation.

Prastora is a few CSS files and a few rules. This page is all of them. If you'd rather start from something finished, take a template and change it.

Copy the files
The whole framework is the css/ folder: a core file, a theme, a handful of component files. Copy it into your project. There is nothing to install, so there is nothing to update either.
Get it on GitHub Just core.css

Link what the page uses

Core first, then one theme, then the components the page needs, then the page’s own styles. Each file wraps itself in a cascade layer, so later layers win without specificity battles.

<link rel="stylesheet" href="css/core.css">
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="css/components/content.css">
<link rel="stylesheet" href="css/pages/my-page.css">

Write ordinary HTML

Sections, stacks and grids do the composing. Size everything in rem: one rem is a fixed share of the window width, which is what keeps the composition intact on every screen.

<main id="main">
  <section class="section stack">
    <h1>My first page</h1>
    <p class="lead">Composed once, scaled everywhere.</p>
    <a class="btn" href="#more">Read more</a>
  </section>
</main>

Adjust per mode, not per pixel

Page styles may add a block for each mode, at the end of the file and in this order. Only these conditions exist, so there are four places to look, not forty.

@layer page {
  .my-hero { padding-block: 8rem; }

  @media (width <= 50em) { /* phones */ }
  @media (width > 50em) { /* desktop */ }
  @media (width >= 125em) { /* large screens */ }
  @media (height <= 30em) { /* low windows */ }
}

Make it yours
A theme is only a set of values. Copy themes/default.css, change the colours and fonts, link your copy instead. Three themes ship with the templates: default, deco and press.
```
@layer theme {
  :root {
    --ink: #1d2730; --paper: #fbfcfd; --accent: #285f73;
    --font: system-ui, sans-serif;
  }
}
```

Before you call it done

Check one window per mode, not every width: within a mode the page only scales. Two scripts in the repository help: check.py keeps the rules (rem only, layer order, known modes) and tools/snap.py compares screenshots before and after a change.

Pick a template Browse the components