Install

Styles

The classes and CSS variables in @gronare/stomme/styles.css that a custom block builds with, each shown in the site's own theme.

The library's blocks are made from these, so a block that uses them takes the theme, the dark surface and the night colours the same way. A class not listed here belongs to one block and can change. Add a custom block shows where the markup goes.

Section rhythm

.section is the box every block sits in: centred, at most 72rem wide, with the side gutter and the vertical rhythm every block shares. Add .section--read for a reading column of 53rem, and wrap the eyebrow, heading and intro in .section-head to keep them to a comfortable line length.

Care

Pruned at the right time

Most shrubs want cutting just after they flower.

<section class="section section--read" style="padding-block: 0">
  <div class="section-head">
    <span class="mono eyebrow">Care</span>
    <h2 class="display">Pruned at the right time</h2>
    <p class="intro">Most shrubs want cutting just after they flower.</p>
  </div>
</section>

The inline padding-block: 0 only keeps this example short; a block leaves the padding to .section.

Headings and text

Class Use it for
.display a block's heading, in the display font and brand colour
.display--hero with .display, the page's one large heading
.intro the line under a heading, muted and a little larger
.mono small uppercase labels in the code font
.eyebrow with .mono, the label above a heading, with the theme's marker
.prose rich text at a reading width, with brand-coloured links
Wren & Sorrel

Gardens that get better every year.

We design, build and look after gardens for homes across the valley.

Plant for the tenth summer

A new garden looks its thinnest on the day it is finished. Read how a project runs.

<span class="mono eyebrow">Wren &amp; Sorrel</span>
<h1 class="display display--hero">Gardens that get better every year.</h1>
<p class="intro">We design, build and look after gardens for homes across the valley.</p>
<h2 class="display" style="margin-top: 2rem">Plant for the tenth summer</h2>
<div class="prose">
  <p>A new garden looks its thinnest on the day it is finished. Read <a href="#">how a project runs</a>.</p>
</div>

Words in <em> inside .display are underlined rather than set in italics, which is what *asterisks* in a heading field produce.

Most gardens fail in the first summer.

<h2 class="display">Most gardens fail in the <em>first summer</em>.</h2>

Buttons

.btn is the main action of a block, .btn-outline the second one beside it, and .btn-ghost a quiet text link. .btn-row lays out a row of them with even gaps and wraps on a narrow screen.

Book a garden visit See recent gardens Call 01632 960 412 → 
<div class="btn-row" style="margin-top: 0">
  <a class="btn" href="#">Book a garden visit</a>
  <a class="btn btn-outline" href="#">See recent gardens</a>
  <a class="btn-ghost" href="tel:+441632960412">Call 01632 960 412 →</a>
</div>

On the dark and gradient surfaces the buttons turn light on their own.

Book a garden visit See recent gardens 
<div class="surface-dark" style="padding: 1.5rem; border-radius: 0.7rem">
  <div class="btn-row" style="margin-top: 0">
    <a class="btn" href="#">Book a garden visit</a>
    <a class="btn btn-outline" href="#">See recent gardens</a>
  </div>
</div>

Cards and icons

.card is a bordered box on the paper colour, with rounded corners that clip a picture inside it; on an <a> the whole card is the link. .ico-badge is the tinted square that holds an icon.

Care

Seasonal visits that keep the garden on course.

<a class="card" href="#" style="padding: 1.25rem; max-width: 20rem">
  <span class="ico-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 19c0-8 6-13 14-13 0 8-5 14-13 14"/><path d="M5 19c2-4 5-7 9-9"/></svg></span>
  <h3 style="margin: 0.75rem 0 0.25rem">Care</h3>
  <p style="margin: 0; color: var(--color-muted)">Seasonal visits that keep the garden on course.</p>
</a>

Surfaces

A block's style.surface puts its .section inside one of these wrappers. A custom block gets them for free through the renderer; use the classes yourself only for a band inside your own markup. On .surface-dark and .surface-gradient the colour variables are redefined, so text, lines and cards inside follow without extra rules.

Class Surface Use it for
none standard most blocks, on the paper colour
.surface-tint tint a quiet change of background between two blocks
.surface-panel panel a rounded tinted panel inside the content width
.band band a full-width band in the surface colour
.surface-dark dark a dark band for a statement or a call to action
.surface-gradient gradient a dark gradient band
surface-tint
band
surface-panel
surface-dark with its own ink
surface-gradient with its own ink
<div class="surface-tint" style="padding: 1rem 1.25rem"><span class="mono">surface-tint</span></div>
<div class="band" style="padding: 1rem 1.25rem"><span class="mono">band</span></div>
<div class="surface-panel" style="padding: 0.5rem 0"><div class="section" style="padding: 1rem 1.25rem"><span class="mono">surface-panel</span></div></div>
<div class="surface-dark" style="padding: 1rem 1.25rem"><span class="mono">surface-dark</span> <span>with its own ink</span></div>
<div class="surface-gradient" style="padding: 1rem 1.25rem"><span class="mono">surface-gradient</span> <span>with its own ink</span></div>

Colours

The theme writes these variables on <html>, so a block that uses them follows the theme, scheme: auto and the dark surfaces. Theme lists the field that sets each one.

--color-brand
--color-brand-press
--color-secondary
--color-highlight
--color-ink
--color-muted
--color-paper
--color-surface
--color-line
--color-on-dark
--color-dark
--color-dark-ink
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; font-size: 0.8rem">
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-brand)"></div><code>--color-brand</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-brand-press)"></div><code>--color-brand-press</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-secondary)"></div><code>--color-secondary</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-highlight)"></div><code>--color-highlight</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-ink)"></div><code>--color-ink</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-muted)"></div><code>--color-muted</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-paper)"></div><code>--color-paper</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-surface)"></div><code>--color-surface</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-ink); background: var(--color-line)"></div><code>--color-line</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-on-dark)"></div><code>--color-on-dark</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-dark)"></div><code>--color-dark</code></div>
  <div><div style="height: 3rem; border-radius: 0.5rem; border: 1px solid var(--color-line); background: var(--color-dark-ink)"></div><code>--color-dark-ink</code></div>
</div>
Variable Use it for
--color-brand, --color-brand-press actions, rules and icons; the pressed shade for hover
--color-secondary, --color-highlight a second accent, and a highlight for numbers and markers
--color-ink, --color-muted text, and secondary text
--color-paper, --color-surface, --color-line the page, a tinted area, and borders
--color-on-dark text on a brand-coloured button or band
--color-dark, --color-dark-ink, --color-dark-line the dark surface, its text and its lines
--eyebrow-accent the eyebrow marker, set from the theme's eyebrowColor

Fonts

Variable Use it for
--font-display headings; .display uses it
--font-sans body text
--font-mono code, labels and figures in .mono

Display: Gardens that get better

Sans: We design, build and look after gardens for homes across the valley.

Mono: pnpm stomme block new promo-banner

<p style="font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; margin: 0">Display: Gardens that get better</p>
<p style="font-family: var(--font-sans); margin: 0.5rem 0 0">Sans: We design, build and look after gardens for homes across the valley.</p>
<p style="font-family: var(--font-mono); margin: 0.5rem 0 0">Mono: pnpm stomme block new promo-banner</p>

Safe areas

--safe-t, --safe-r, --safe-b and --safe-l hold the device's safe-area insets, zero on a screen without a notch. .section already pads with them; use them in a block that reaches the edge of the screen on its own, such as a fixed bar.