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.

.pl-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="pl-u-sr-only" type="radio" id="plan-pro" name="plan" />
<label for="plan-pro">Pro</label>

The screen-reader utilities use !important to protect their hiding rules. Provide a visible focus treatment on the associated control when a focusable input stays visually hidden.

.pl-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="pl-u-focusable-sr-only" href="#main">Skip to content</a>

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

.pl-u-truncate

One-line truncation with an ellipsis.

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

.pl-u-min-0

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

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

.pl-u-wrap-anywhere

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

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

.pl-u-flow

Vertical rhythm for a prose block. The sibling selector (> * + *) adds space before every child after the first. It does not clear existing child margins; reset those separately when they double up with your intended rhythm. Tune the step via --pl-u-flow-space.

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

.pl-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="pl-u-marginless">Inline helper copy inside a toolbar.</p>

.pl-u-surface

Panel styling for ad-hoc grouping: background, text color, border, radius. For callouts that don’t need a full .pl-c-card. It supplies no padding; add token-based padding in your app layer when the surface contains content.

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

.pl-u-muted

Secondary/caption text color.

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

.pl-u-muted-sm

Small muted metadata/caption text.

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

.pl-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="pl-u-icon-title">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
  <span class="pl-u-min-0 pl-u-truncate">Long workflow title</span>
</span>

Badge and chip groups

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

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

.pl-u-full-bleed

Break an element out to the viewport edges inside a centered container (a wide image in a prose column). Avoid it in off-center panes or independently scrolling regions, where viewport-relative width can cause overflow.

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

.pl-u-transition-scope

Opt into a clipped, isolated boundary for application-owned Element.startViewTransition() updates. It styles only that element’s transition pseudo-tree. See the approvals pattern for feature detection, reduced-motion bypass, focus and interrupted updates.

Tokens exposed

--pl-u-transition-duration defaults to --pl-duration-2 for scoped transitions.