BerlinX cheatsheet

Every attribute, value and custom property on one page. The usage guide explains the reasoning; this is the lookup table.

Rules of thumb: variants are bare attributes, never classes. Anything taking a value uses one of a fixed set — there are no arbitrary values. Base rules are wrapped in :where(), so any CSS of your own wins without !important.

Layout

<header row justify="between" items="center">…</header>
<div row gap-m justify="end">…</div>
<main col gap-m items="stretch">…</main>

Two things worth knowing:

• col packs children to the start. A header or button row inside one shrink-wraps, which leaves its own justify nothing to distribute. Add items="stretch" to the col when you want full-width children.
• Headings, paragraphs and sectioning elements drop their block margins inside a row — the flex gap already spaces them. Inside a col, prose margins are left alone.

Buttons and tags

<button>Save</button>
<button secondary>Cancel</button>
<button destructive>Delete</button>
<button icon secondary tooltip="Edit" aria-label="Edit invoice">…</button>
<span tag outline>CSS</span>
<span badge destructive>Overdue</span>

A tag is interactive when it is an a, button, summary or label. A plain <span tag> is inert, so it never pretends to be clickable. A label tag can wrap a native file input; use visually-hidden on the input to keep it keyboard accessible, and its focus ring appears on the label.

Forms

<label stack>
  Email
  <input type="email" name="email" required />
</label>

<fieldset role="group">
  <input type="search" name="q" />
  <button type="submit">Search</button>
</fieldset>

<label><input type="checkbox" role="switch" /> Notify me</label>

Every input[type] is styled directly — text email tel url search password number date time color file range checkbox radio submit reset button — plus select and textarea. No attribute needed. Inputs without type, plus datetime-local, month and week, are also styled. Ordinary fieldsets wrap when needed; a joined control group stays on one line.

Choices, validation and descriptions

Keep radio names shared within each group and unique between unrelated groups. Native keyboard selection and form reset still work. aria-invalid is supplied by your application; CSS cannot set ARIA state. Unsupported :user-invalid engines retain native browser validation and explicit ARIA error styling.

Lists, navigation and identity

Use role="list" on marker-free list, steps and timeline lists. Avatars need image alt text or named initials unless equivalent text is already present. Tab navigation retains link semantics; it is not an interactive ARIA tablist. Your application supplies pagination, counts and step state. For a gallery, provide tabindex="0", a region name, and optional fragment links to slide IDs.

Tables

<table responsive="stack">
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Email</th></tr>
  </thead>
  <tbody>
    <tr reveal>
      <th scope="row">Ada Lovelace</th>
      <td data-label="Email">ada@example.com</td>
    </tr>
  </tbody>
</table>

Prefer the wrapper form <div responsive><table>…</table></div>: on the table itself the attribute has to switch the table's own display, which shrink-wraps the columns and drops the table role. A cell with no data-label prints only its content — right for a <th scope="row"> and for an actions cell.

Overlays

<dialog id="editDialog">…</dialog>          <!-- modal -->
<dialog drawer="right">…</dialog>           <!-- edge drawer -->

<button popovertarget="menu" icon aria-label="Account">…</button>
<div popover id="menu" placement="bottom-end" col gap>…</div>

row/col are safe on a dialog or popover — BerlinX restates the "hidden while closed" rule so a bare display: flex cannot leave the thing on screen. Anchored placement is progressive enhancement: without CSS anchor positioning a popover centres in the viewport and directional placement values do nothing. placement="center" always centres it; use this when opening without an invoker.

State and feedback

tooltip never reaches assistive tech, which is why aria-label beside it is not optional. Inside a responsive scroll container a tooltip can be clipped — use title there instead.

Themes

<html theme="dark">                     <!-- the whole page -->
<aside theme="dark">…</aside>           <!-- one region -->

Colour tokens hold both values: --background: light-dark(#fff, #09090b). Override them the same way. Print is always light.

Text

<h1 xl>Client<span primary>Book</span></h1>
<p subheader>Issued 2026-08-11</p>
<nav breadcrumb><a href="/">Home</a><a href="/clients">Clients</a></nav>

Elements that are already components

No attribute required.

aside and menu are claimed by components — use blockquote for pull quotes and ul for plain lists.

Theming tokens

Every one is a custom property on :root. Override the ones you want; the rest follow.

Surfaces and text

Roles

Fills keep one value in both themes; the *-text tokens are what links, [error] messages and [accent] text use, because a fill and text in the same colour cannot both reach 4.5:1 on a dark page. --primary-text and --destructive-text follow their fills automatically. --accent is a fill: #ffbf00 as text is 1.65:1. --success and --warning colour notice edges and meter levels.

Lines, shape and space

:root {
  --primary: #7c3aed;
  --radius: 4px;
}

Per-element button theming — these are scoped, so one button can differ without touching the roles above:

.brand-button {
  --button-bg: rebeccapurple;
  --button-fg: white;
  --button-bg-hover: #5b2d91;
  --button-bg-active: #4a2475;
  --button-border: transparent;
}

Gotchas

• icon without aria-label is an unlabelled button. tooltip does not count — it is drawn in CSS and assistive tech never sees it.
• justify on a col does nothing visible until the children stretch — add items="stretch".
• responsive="stack" needs data-label on every td you want labelled; there is no way for CSS to read a cell's <th>.
• loading is the spinner, aria-busy="true" is the meaning. Set both. Add disabled to busy native buttons to block keyboard activation too. Reduced motion slows the spinner to 1.4s per revolution; decorative animations stop.
• The W3C validator rejects bare attributes (Attribute row not allowed on element div). Browsers have matched arbitrary attributes since CSS2 and handle them correctly, but CI that gates on HTML validation will complain.
• Style a select with background-color, not background. The arrow is a background image, so the shorthand removes it along with the native one.
• Overriding a surface colour with a plain value (--background: #fffdf8) applies it in dark mode too. Use light-dark(light, dark), or add theme="light" to <html> if your design is light-only.
• Requires Chrome/Edge 114+, Firefox 125+, Safari 17+ — native popovers, :has(), :where(), color-mix() and oklch() are all load-bearing. The dark theme needs light-dark() (Chrome/Edge 123+, Safari 17.5+); older engines stay light.