Spacing & Size Config
Accoutrement maps for storing global spacing and size tokens.
Related
Accoutrement Scale [external]
$text-ratios
scss
$text-ratios: (
'line-height': 1.4,
);
Going for a readable line-height that adapts to context
Ratio line-height (1.4)
$root
scss
$root: calc(1.25em + 0.5vw);
Size Previews
$font-sizes
scss
$font-sizes: (
'small': 0.8rem,
'xsmall': 0.7rem,
'xxsmall': 0.6rem,
'medium': 1.25rem,
'large': calc(1.25rem + 0.5vw),
'xlarge': calc(1.75rem + 1vw),
'h1': '#xlarge',
'h2': '#large',
'h3': '#medium',
'h4': 1.1rem,
'code': 0.8em,
);
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,
);