layout-primitives

Layout Primitives

Overview

Build reusable layout primitives (Stack, Cluster, Sidebar, Grid) that compose to create any layout. Based on Every Layout patterns - intrinsic design that adapts without breakpoints.

When to Use

• Setting up layout components for a design system
• Creating composable layout building blocks
• Replacing repetitive flexbox/grid patterns
• Building layouts that adapt without media queries
• Implementing consistent spacing throughout an app

Quick Reference: Core Primitives

Primitive	Purpose	Primary CSS
Stack	Vertical spacing	flex-direction: column + gap
Cluster	Horizontal wrapping groups	flex-wrap: wrap + gap
Sidebar	Two-column with minmax	flex-wrap: wrap + basis
Switcher	Stack/row based on width	flex-wrap + container query
Center	Centered max-width	max-width + margin-inline: auto
Cover	Vertically centered hero	min-height + flex
Grid	Auto-fill responsive grid	grid-template-columns: repeat(auto-fill)
Frame	Aspect ratio container	aspect-ratio
Reel	Horizontal scroll	overflow-x: auto + flex-wrap: nowrap
Box	Spacing/padding container	padding

---

Stack

Vertical rhythm with consistent spacing.

CSS

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--stack-space, 1.5rem);
}

/* Or with gap (modern, simpler) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, 1.5rem);
}

/* Variants */
.stack[data-space="sm"] { --stack-space: 0.5rem; }
.stack[data-space="md"] { --stack-space: 1rem; }
.stack[data-space="lg"] { --stack-space: 2rem; }
.stack[data-space="xl"] { --stack-space: 4rem; }

React Component

interface StackProps {
  space?: 'sm' | 'md' | 'lg' | 'xl';
  as?: React.ElementType;
  children: React.ReactNode;
  className?: string;
}

export function Stack({
  space = 'md',
  as: Component = 'div',
  children,
  className,
}: StackProps) {
  return (
    <Component
      className={clsx('stack', className)}
      data-space={space}
    >
      {children}
    </Component>
  );
}

// Usage
<Stack space="lg">
  <h1>Title</h1>
  <p>Paragraph</p>
  <p>Another paragraph</p>
</Stack>