scale

$scale-ratios variable

Qasper has a typographic rhythm for determining sizes along an exponential scale, and also allows for linear scaling

$scale-ratios: (
  'qasper': 1.375,
  'multiple': 'linear',
);
Links
qasper: 1.375
1 1.38 1.89 2.6 3.57 4.91 6.76
multiple: linear
1 2 3 4 5 6 7

$base-sizes variable

The core Qasper sizes used to establish a rhythmic scale

$base-sizes: (
  'root': $base-size,

  'large': 'root' ('qasper': 2),
  'medium': 'root' ('qasper': 1),
  'small': 'root' ('multiple': 0.9),
  'smaller': 'root' ('multiple': 0.75),
);
Links
root: 1rem
Pack my box with five dozen liquor jugs.
large: 1.88889rem
Pack my box with five dozen liquor jugs.
medium: 1.38889rem
Pack my box with five dozen liquor jugs.
small: 0.9rem
Pack my box with five dozen liquor jugs.
smaller: 0.75rem
Pack my box with five dozen liquor jugs.

$type-sizes variable

Specific sizes to use in application typography

$type-sizes: (
  'h1': 'large',
  'h2': 'medium',
  'normal': 'root',
  'notifications': 0.65rem,
);
Links
h1: 1.88889rem
Pack my box with five dozen liquor jugs.
h2: 1.38889rem
Pack my box with five dozen liquor jugs.
normal: 1rem
Pack my box with five dozen liquor jugs.
notifications: 0.65rem
Pack my box with five dozen liquor jugs.

$spacing-sizes variable

Sizes to use for spacing of components in the app

$spacing-sizes: (
  'rhythm': 'medium',

  'gutter': 'rhythm',
  'spacer': 'gutter' ('multiple': 2),
  'shim': 'gutter' ('multiple': 0.5),
  'half-shim': 'gutter' ('multiple': 0.25),
  'quarter-shim': 'gutter' ('multiple': 0.125),

  'border-thick': 2px,
  'border-thin': 1px,
  'corners': 6px,
);
Links
rhythm: 1.38889rem
gutter: 1.38889rem
spacer: 2.77778rem
shim: 0.69444rem
half-shim: 0.34722rem
quarter-shim: 0.17361rem
border-thick: 0.11111rem
border-thin: 0.05556rem
corners: 0.33333rem

$component-sizes variable

Sizes that are specific to components

$component-sizes: (
  'nav-text-pad': 4px,
  'logo': 'rhythm' ('multiple': 3),
  'activities': 21rem,
  'qollector': 15rem,
  'oauth-icon': 'rhythm' ('multiple': 4.5),
  'touch': 'rhythm' ('multiple': 0.75),
  'icon-target': 'rhythm' ('multiple': 0.55),
  'small-pad': 'gutter' ('multiple': 0.2),
);
Links
nav-text-pad: 0.22222rem
logo: 4.16667rem
activities: 21rem
qollector: 15rem
oauth-icon: 6.25rem
touch: 1.04167rem
icon-target: 0.76389rem
small-pad: 0.27778rem

$layout-sizes variable

Page and breakpoint sizes, used in page layouts

$layout-sizes: (
  'page': 34rem,
  'bp-small': 23.055rem,
);
Links
page: 34rem
bp-small: 23.055rem