Vanilla Breeze

breakpoint-specimen

Responsive breakpoint visualization with live width readout. Joins the specimen family alongside spacing, type, and motion.

Overview

The <breakpoint-specimen> component reads --bp-* tokens from :root and renders a horizontal ruler of breakpoint stops alongside a live readout of the current viewport width and active breakpoint label. It joins the specimen family next to <spacing-specimen>, <type-specimen>, <motion-specimen>, and <token-specimen>.

Attributes

Attribute Type Default Description
tokens string sm,md,lg,xl Comma-separated breakpoint names to display.
prefix string --bp- CSS variable prefix to read from :root.
label string — Optional heading label.
data-observe string — CSS selector of a container to track instead of the viewport. Container-query mode (JS-required).

Usage

Viewport mode

With no attributes, the specimen reads the project's canonical breakpoints and tracks the window. Resize the browser to see the cursor and active label follow.

Container-query mode

Pass data-observe to track an arbitrary element via ResizeObserver instead of the viewport. Useful for testing how a component reacts inside a resizable preview pane.

Progressive Enhancement

The component layers cleanly:

  1. HTML. A semantic <dl> of breakpoint name → value remains readable without JS or CSS.
  2. CSS. Pure-CSS active-row highlighting via @media rules calls out the matching token without any JavaScript (viewport mode only).
  3. JS. Adds the live numeric width readout, the moving cursor on the ruler, and container-query mode (data-observe).

Container-query mode is inherently JS-required — there is no equivalent CSS subscription to an arbitrary element's width.

Related
↑