OddSite 4.0.0

Spacing & Size Config

Accoutrement maps for storing global spacing and size tokens.

Related

Accoutrement Scale [external]

$ratios

scss
$ratios: (
  'line-height': 1.4,
);

Going for a readable line-height that adapts to context

Ratio line-height (1.4)

$font-sizes

scss
$font-sizes: (
  'small': 0.8rem,
  'xsmall': 0.7rem,
  'rem': calc(1.25em + 0.5vw),
  'medium': 1.25rem,
  'large': calc(1.25rem + 0.5vw),
  'xlarge': calc(1.75rem + 1vw),
  'h1': '#xlarge',
  'h2': '#large',
  'h3': '#medium',
  'code': 0.9em,
);

Size Previews

$spacing-sizes

scss
$spacing-sizes: (
  'gutter': 0.75rem,
  'newline--default': '#gutter',
  'newline': '#newline--default',
  'gutter-plus': calc(var(--gutter) * 1.5),
  'double-gutter': calc(var(--gutter) * 2),
  'triple-gutter': calc(var(--gutter) * 3),
  'shim': calc(var(--gutter) / 2),
  'shim-plus': calc(var(--gutter) * 0.75),
  'half-shim': calc(var(--gutter) / 4),
  'quarter-shim': calc(var(--gutter) / 8),
  'spacer': calc(var(--double-gutter) + 3vw),
);

Size Previews

$theme-sizes

scss
$theme-sizes: (
  'page-margin': calc(var(--quarter-shim) + 4vw),
  'border-width': medium,
  'radius': var(--half-shim),
  'grid-hero': calc(var(--gutter) * 8),
);

Size Previews

$page-sizes

scss
$page-sizes: (
  'logo-item': 10rem,
  'grid-item': 16rem,
  'min-page': 22rem,
  'page': 30rem,
  'wide-page': 38rem,
  'wide-break': 56em,
);

Size Previews