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