Site header

Style Guide

Style Guide

Style Guide

The Style Guide describes the stable HTML and CSS surface emitted by Quail Pages through qp.classes.json.

Use it to understand classes, structural relationships, modifiers, states, and presentation hooks.

Authored and standard classes

An authored class is an optional theme-specific styling hook supplied by content. Standard qp-* classes are stable surfaces emitted by Quail Pages. They work together, but belong to different contracts.

Stylesheet infrastructure

base.css, variables.css, and style.css are infrastructure rather than architecture owners. In particular, base.css owns global document/browser foundations and has no architecture or class-contract key. It must not define QP primitive classes or become a component catch-all. Theme copies normally contain only font resource declarations or exceptional document-global rules; shared mechanics belong to QP Base and themes select their values through semantic variables.

What the Style Guide covers

Page

Root authored concept that defines an individual Quail Pages page and coordinates its layout and content.

Layout

Structural authored concepts that organize pages and rendered content.

Rendered Content

Authored content rendered directly through a stable Quail Pages surface.

Built Content

Authored content that derives or adapts other data into rendered Quail Pages structures.

Supporting Object

Authored structured data consumed by another object without an independent rendering role.

Core System

Internal renderer and runtime concepts that support stable Quail Pages behavior.

Documentation, Style Guide, and Theme

Documentation describes what can be authored. The Style Guide describes the structural and presentation hooks an object exposes. Theme inventories the styling controls available for those objects.

The contracts are related, but are not mirrors: not every authored object has a class contract, and not every emitted surface is a directly authored primitive.

Responsive presentation widths

Canonical Quail Pages presentation-width vocabulary. These ranges describe available viewport inline size, not device detection. Rem boundaries are canonical; at the 16px reference size, 48rem corresponds to 768px and 64rem corresponds to 1024px. Component-owned container queries and content-fit breakpoints may use independent thresholds. The exact structured boundaries live in qp.architecture.json.

Mobile

≤ 48rem (≤ undefinedpx) Viewport inline sizes up to and including 48rem.

Tablet

> 48rem (> undefinedpx) through ≤ 64rem (≤ undefinedpx) Viewport inline sizes greater than 48rem and up to and including 64rem.

Desktop

> 64rem (> undefinedpx) Viewport inline sizes greater than 64rem.

Machine-readable contracts

The Style Guide is backed by the Quail Pages class contract and the shared architecture that organizes it.

Architecture

qp.architecture.json Defines how Quail Pages concepts are organized, names canonical responsive presentation-width ranges, and records keyless stylesheet infrastructure such as base.css.

Class Contract

qp.classes.json Defines the stable classes, structural relationships, modifiers, states, and styling hooks emitted or managed by Quail Pages.