Consistent spacing scale and component sizing.

Spacing Scale

Eddie uses a consistent spacing scale via --ed-spacing-* tokens:

Token Description
--ed-spacing-xs Extra small (tightest)
--ed-spacing-sm Small
--ed-spacing-md Medium (default)
--ed-spacing-lg Large
--ed-spacing-xl Extra large (loosest)

Use these in inline styles when needed:

<div style="padding: var(--ed-spacing-md); gap: var(--ed-spacing-sm);">

Size Function (SCSS)

Inside Eddie component SCSS, use the size() function from the token package:

@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *; .ed-c-my-component { padding: size(4); // outputs var(--ed-size-4) margin-bottom: size(8); // outputs var(--ed-size-8) }

T-Shirt Sizes

Components that accept a size prop use abbreviated t-shirt sizes:

xs · sm · md · lg · xl

<ed-button size="sm" text="Small"></ed-button> <ed-button size="lg" text="Large"></ed-button>

Layout Spacing

Use Eddie layout components for structural spacing rather than manual padding:

  • ed-layout-container — Caps content width with horizontal padding
  • ed-grid — Responsive grid with built-in gap
  • ed-layout-section — Vertical section spacing