Type Scale

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);
}