The Tao of Eastwood 1.0.0

Scale Settings

Related

Accoutrement Scale [external]

$modular-scale

scss 
$modular-scale: (
  'text-ratio': 1.6,
);

Ratio text-ratio (1.6)

-3 0.24
 
-2 0.39
 
-1 0.63
 
— base
 
1 1.6
 
2 2.56
 
3 4.1
 

$text-sizes

scss 
$text-sizes: (
  'root': 16px,
  'responsive': calc(%s + %s)
    (
      '%s': '#root' 0.25vw,
    ),
  'large': 1rem
    (
      'text-ratio': 0.5,
    ),
  'xlarge': calc(%s + %s)
    (
      '%s': '#large' 2.5vw,
    ),
  'xxlarge': calc(%s + %s)
    (
      '%s': '#large' 5vw,
    ),
  'medium': 1rem
    (
      'text-ratio': 0.125,
    ),
  'small': 1rem
    (
      'text-ratio': -0.25,
    ),
  'xsmall': 1rem
    (
      'text-ratio': -0.5,
    ),
);

Size Previews

root 16px Pack my box with five dozen liquor jugs.
responsive calc(16px + 0.25vw) Pack my box with five dozen liquor jugs.
large 1.2649110641rem Pack my box with five dozen liquor jugs.
xlarge calc(1.2649110641rem + 2.5vw) Pack my box with five dozen liquor jugs.
xxlarge calc(1.2649110641rem + 5vw) Pack my box with five dozen liquor jugs.
medium 1.0605105612rem Pack my box with five dozen liquor jugs.
small 0.889139705rem Pack my box with five dozen liquor jugs.
xsmall 0.790569415rem Pack my box with five dozen liquor jugs.

$spacing-sizes

scss 
$spacing-sizes: (
  'rhythm': '#root'
    (
      'text-ratio': 1,
      'convert-units': 'rem',
    ),
  'gutter': '#rhythm',
  'double-gutter': '#gutter'
    (
      'times': 2,
    ),
  'spacer': calc(%s + %s)
    (
      '%s': '#double-gutter' 4vmin,
    ),
  'shim': '#gutter'
    (
      'times': 0.5,
    ),
  'half-shim': '#shim'
    (
      'times': 0.5,
    ),
  'quarter-shim': '#shim'
    (
      'times': 0.25,
    ),
);

Size Previews

rhythm, gutter 1.6rem
 
double-gutter 3.2rem
 
spacer calc(3.2rem + 4vmin)
 
shim 0.8rem
 
half-shim 0.4rem
 
quarter-shim 0.2rem
 

$component-sizes

scss 
$component-sizes: (
  'icon': 1em,
  'quote': 40px
    (
      'convert-units': 'rem',
    ),
  'ending-mark': 4em,
  'title-icon': 8em,
  'nav-panel': 15em,
  'chapter-image': 16rem,
  'scooch': 0.1rem,
);

Size Previews

icon 1em
 
quote 2.5rem
 
ending-mark 4em
 
title-icon 8em
 
nav-panel 15em
 
chapter-image 16rem
 
scooch 0.1rem
 

$page-sizes

scss 
$page-sizes: (
  'page': 42rem,
);

Size Previews

page 42rem
 

$break-sizes

scss 
$break-sizes: (
  'page-break': '#page'
    (
      'times': 2,
      'convert-units': 'browser-ems',
    ),
  'page-quotes': '#page'
    (
      'times': 1.5,
    ),
);