# Chapbook

> A small CSS system for documents that want to read like documents. Monospace
> carries structure, a second face carries language, and separation comes from
> rules and space rather than from cards. v1.0.0, MIT, no dependencies, no
> build step, about 500 lines.

Load one stylesheet and use the class names. There is nothing to install and
nothing to initialise.

    <link rel="stylesheet" href="https://chapbook.page/v1.0.0/chapbook.css">

## The nine rules

01. Two faces, and the mono is the constant. If a piece of text tells you WHAT
    KIND OF THING you are looking at, it is mono, uppercase and tracked. If it
    SAYS SOMETHING, it is the language face. That test decides every case.
02. No cards. No radius, no shadow, no container fill. Objects are separated by
    a hairline and by space. The only fill is the row hover at ~1.07:1.
03. Two weights of rule. 1px --rule between peers; 2px --ink to open and close
    the document (under the masthead, above the first block, above the footer).
    Never a third weight.
04. The numbered rail. A sticky left column with a number and a mono section
    name; content on the right. `align-self: start` is required or it will not
    stick, silently.
05. One row anatomy everywhere. Mono label, display title, mark, optional
    description, optional mono destination. The whole row is the link. Use the
    up-right arrow to leave the site and the right arrow to stay.
06. Tokens declared three times: `:root`, then the dark media query guarded
    with `:not([data-theme="light"])`, then `[data-theme="dark"]`. Never style
    a component inside those blocks — only redefine tokens.
07. Contrast is measured and written down, against the worst-case grain pixel
    rather than the flat background. Text clears 4.5:1. Never pure black on
    pure white.
08. A bordered control, not another word in a row of words. A control that
    DOES something gets a border; links that only GO somewhere do not. A
    pressed state is a border in ink, never a fill.
09. It prints. Ink on white, controls gone, structural blocks kept whole, and
    href expanded after content links.

## Tokens — the names are the contract

Colour: --paper --sunk --rule --ink --muted --faint --accent --accent-deep
Also:   --grain
Faces:  --mono (shared) --language (the site's own) --display (defaults to --language)
Layout: --gut --wrap --rail --measure --ease

Change every value. Keep every name.

## Classes — the whole of it

Layout: .wrap .bar .brand .bar-end .barlinks .blk .rail .rail .n .body .foot
Type:   .eyebrow .name .intro .aside .lede .label .small .footnote .code
Row:    .index .row .row-label .row-title .row-mark .row-desc .row-meta
Other:  .theme .tsvg .theming .vh .skip

Unclassed links inside .body, .lede and .intro get the accent treatment.

## Files

- [The stylesheet](https://chapbook.page/v1.0.0/chapbook.css): the system. Required. Everything else is optional.
- [The full spec](https://chapbook.page/system.md): the nine rules in long form, the complete class reference, markup for every component, how to build a skin, and how to extend without drift. Read this if you are generating a page.
- [Skins](https://chapbook.page/v1.0.0/chapbook-skins.css): two worked palettes, from sites actually running the system. Set data-skin on the root.
- [Theme bootstrap](https://chapbook.page/v1.0.0/chapbook-theme.js): 24 lines. Inline it in the head or a stored dark preference flashes white.
- [Specimen](https://chapbook.page): the system documenting itself. Every component on it is live.
- [Source](https://github.com/aarontaylor-dev/chapbook): including the build that measures contrast and refuses to publish a failing token.

## If you are generating a page

Fetch system.md. It is the complete specification and it includes a working
page you can start from. Do not invent classes — the list above is exhaustive,
and anything you need beyond it belongs in a separate stylesheet of your own.