Concepts
Type Scale
This is the system of all font size values in the framework.
Scale #
Type scale automatically generates corresponding CSS variables that you can use in any part of the framework, for example, when developing your modules. Type scale allows you to approach development in a systematic way and use only those font size values that are specified in this scale. This makes the project more organized and streamlined.
These are the default values in type scale.
type-scale: (
80: 80px,
64: 64px,
60: 60px,
56: 56px,
48: 48px,
36: 36px,
32: 32px,
28: 28px,
24: 24px,
20: 20px,
18: 18px,
16: 16px,
15: 15px,
14: 14px,
13: 13px,
12: 12px,
11: 11px
)
Usage #
You can use the values of type scale as CSS variables in your modules.
.my-module {
// vars
--my-module-font-size: var(--type-scale-14);
// props
font-size: var(--my-module-font-size);
}
Extend #
To extend the default values, you need to create your scales.scss
and then extend $scales
map in it.
// your project
superkube/
vars/
scales.scss
vars.scss
main.scss
Next, import scales.scss
in your custom framework settings in the vars.scss
file.
// vars.scss
@import "vars/scales";
Now you can extend the type scale in the scales.scss
file with map-extend
function.
// =Scales
$scales: map-extend($scales, (
type-scale: (
72: 72px
)
));
After extending, a new value will be added and the scale will look like this:
type-scale: (
80: 80px,
72: 72px,
64: 64px,
60: 60px,
56: 56px,
48: 48px,
36: 36px,
32: 32px,
28: 28px,
24: 24px,
20: 20px,
18: 18px,
16: 16px,
15: 15px,
14: 14px,
13: 13px,
12: 12px,
11: 11px
)
Now you can use this CSS variable in modules.
.my-module {
// vars
--my-module-font-size: var(--type-scale-72);
// props
font-size: var(--my-module-font-size);
}