Utilities

Porchlight utilities are a small, finite set of single-purpose helpers. This is deliberately not a utility-first framework: there is no utility for every CSS property. Each utility earns its place by serving a recurring need that doesn’t belong to a component.

.u-sr-only

Hide content from sighted users while keeping it available to assistive tech. Use this for native controls or labels that should remain visually hidden even when focused because another visible element carries the focus treatment.

<input class="u-sr-only" type="radio" id="plan-pro" name="plan" />
<label for="plan-pro">Pro</label>

This is the one utility (and one of the few places in the framework) that uses !important. It’s an a11y guarantee that must win over any context.

.u-focusable-sr-only

The same screen-reader-only hiding pattern, but it becomes visible on :focus or :active. Use for skip links and other keyboard targets that need to reveal themselves when tabbed to.

<a class="u-focusable-sr-only" href="#main">Skip to content</a>

.u-visually-hidden remains as a compatibility alias for this focus-reveal behavior. Prefer .u-sr-only for hidden native inputs and .u-focusable-sr-only for skip links.

.u-truncate

One-line truncation with an ellipsis.

<span class="u-truncate">a-very-long-file-name.webp</span>

.u-min-0

Allow a flex/grid child to shrink below its intrinsic content width. Pair it with .u-truncate when the truncating element is itself a flex/grid child.

<span class="u-min-0 u-truncate">very-long-account-name</span>

.u-wrap-anywhere

Let long tokens break anywhere before they force a card, table, or panel wider than its container.

<code class="u-wrap-anywhere">request_01JZ...very-long-id</code>

.u-flow

Vertical rhythm for a prose block. The sibling selector (> * + *) adds space between top-level children: no top margin on the first, no bottom on the last. Tune the step via --u-flow-space.

<div class="u-flow">
  <p>...</p>
  <p>...</p>
</div>

.u-marginless

Remove default block margins from a single text element when placing prose inside dense component chrome or app-specific flex/grid rows.

<p class="u-marginless">Inline helper copy inside a toolbar.</p>

.u-surface

Panel styling for ad-hoc grouping: background, text color, border, radius. For inline callouts that don’t need a full .c-card.

<div class="u-surface">An ad-hoc surface.</div>

.u-muted

Secondary/caption text color.

<span class="u-muted">Updated 2 hours ago</span>

.u-muted-sm

Small muted metadata/caption text.

<span class="u-muted-sm">Updated 2 hours ago</span>

.u-icon-title

Leading icon + title pattern. Keeps the icon with the first line while letting the text wrap or truncate inside flex/grid parents.

<span class="u-icon-title">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
  <span class="u-min-0 u-truncate">Long workflow title</span>
</span>

Badge and chip groups

Use the existing .l-cluster primitive for wrapping badge/chip groups. Tune the gap with --l-cluster-gap.

<div class="l-cluster" style="--l-cluster-gap: var(--pl-space-2);">
  <span class="c-badge">Queued</span>
  <span class="c-chip">Finance</span>
</div>

.u-full-bleed

Break an element out to the viewport edges inside a constrained container (a wide table or image in a prose column).

<figure class="u-full-bleed">...</figure>

Tokens exposed