Page layout
Containers, section rhythm, display type and grids, the frame every page is built in.
Section head and split
Close in four days
Month-end without the spreadsheet relay.
Reconciliations run every night, so the last week of the month is review, not data entry.
Every account, matched overnight
Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.
Photo: the reconciliation screen on a laptop, three-quarter angle
<section class="mn-section mn-section-sm">
<div class="mn-container">
<div class="mn-section-head mn-section-head-split">
<div><p class="mn-eyebrow">Close in four days</p><h2 class="mn-title">Month-end without the spreadsheet relay.</h2></div>
<div><p class="mn-intro">Reconciliations run every night, so the last week of the month is review, not data entry.</p></div>
</div>
<div class="mn-split">
<div class="mn-stack"><h3 class="mn-subtitle">Every account, matched overnight</h3><p class="mn-muted" style="margin:0">Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.</p></div>
<div class="mn-media mn-media-placeholder" style="--ratio:4/3" role="img" aria-label="Photo: the reconciliation screen on a laptop, three-quarter angle">Photo: the reconciliation screen on a laptop, three-quarter angle</div>
</div>
</div>
</section>Columns
01: Connect
Link banks, cards and payroll in ten minutes.
02: Match
Rules learn from every approval you make.
03: Close
Export an audit trail your accountant signs off.
<section class="mn-section mn-section-sm">
<div class="mn-container mn-cols mn-cols-3">
<div><h3 class="mn-subtitle">01: Connect</h3><p class="mn-muted">Link banks, cards and payroll in ten minutes.</p></div>
<div><h3 class="mn-subtitle">02: Match</h3><p class="mn-muted">Rules learn from every approval you make.</p></div>
<div><h3 class="mn-subtitle">03: Close</h3><p class="mn-muted">Export an audit trail your accountant signs off.</p></div>
</div>
</section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/layout.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-site | On <body>: a full-height column so the footer sits at the bottom. |
| mn-skip | A “Skip to content” link, visible on focus. Point it at <main id="main">. |
| mn-container | Centred content width with side gutters. mn-container-narrow (46rem) · mn-container-wide (88rem). --mn-container sets it. |
| mn-section | A band of the page with vertical rhythm (--mn-section-space) and a container for queries. mn-section-sm · mn-section-flush (no top padding) · mn-section-muted · mn-section-bordered. |
| mn-section-head | Eyebrow, title and intro above a section. mn-section-head-center · mn-section-head-split (title left, intro right). |
| mn-eyebrow | A short label above a title. Use it on a few sections, not all. |
| mn-display · mn-title · mn-subtitle | Fluid display type for heroes, section titles and sub-titles, in the noodle’s heading font. |
| mn-intro | Intro paragraph, fluid size, 38em measure. |
| mn-cols mn-cols-2|3|4 | Equal columns that collapse on narrow sections. |
| mn-split | Two columns (text + media). mn-split-start / mn-split-end make one side wider, mn-split-reverse swaps them, mn-split-top aligns to the top. |
| mn-grid | Auto-filling grid; --mn-min sets the smallest column (default 16rem). |
| --mn-container · --mn-gutter · --mn-section-space | Page-level tokens. Override on :root or any noodle. |
Accessibility
- Use one <h1> per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for <h2>.
- Landmarks: <header>, <main id="main">, <footer>; name repeated <nav>s with aria-label.
- Put mn-skip as the first element of <body>.
- Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview.