Breakouts

A minimal utility-first CSS toolkit centered on the Mulligan breakout grid pattern.

Installation

npm install breakouts
# or
bun add breakouts

Core Layout

.breakouts is the main API. Direct children land in the centered content column by default. Add .popout, .feature, or .full to widen specific elements.

<article class="breakouts">
  <p>Default content width</p>
  <figure class="popout">Slightly wider</figure>
  <pre class="feature">Wider still</pre>
  <img class="full" alt="" />
</article>

Default content

Popout

Feature

Full

Utilities

Spacing

p-4

px-4 py-3

my-4 + p-4

Typography

Left aligned

Center aligned

Uppercase bold

Longer line-height utility on a feature-width block.

Fallback layout helpers

.container remains available as a classic centered wrapper.

.full-bleed is still available for viewport-wide content outside the main grid API.

Colors

bg-background

bg-surface

bg-primary

bg-secondary

bg-accent

bg-muted

Themes And Color Modes

Add dark or light to html for explicit color mode control. Without an explicit class, Breakouts follows prefers-color-scheme.

<html class="dark">

Prebuilt themes: chupa-pop, medical, tootsie-pop.

Customize

@use 'breakouts' with (
  $color-primary: #d1ff4a,
  $color-accent: #8a2be2
);

@use 'breakouts/src/theme/chupa-pop';
@use 'breakouts' as *;