Basis

Overview #

The Basis variables set the basic style settings. Affects project fonts, size and line-height of the body text, as well as general unit values for distances and sizes.

Fonts

Superkube has the following fonts and weight settings by default:

:root {
    --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: inherit;
    --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    --font-weight-semibold: 600;
    --font-weight-heavy: 900;
}

Unit

Superkube is fully based on a system concept. Therefore, all units of measurement in it correspond to the basic value of unit. By default it is 4px.

$unit: 4px;

This means that 1rem in SCSS will be 4px. For example:

.item {
    margin-bottom: 2rem; // 2 units * 4px = 8px
}

If possible, all units in the framework are specified in rem. It helps to do predictable design and follow a systematic approach. At the same time it is quite acceptable to specify the size in pixels or other units.

Body

Superkube has basic font size and line height of body text settings. This means that the base font size of the paragraph and 1em will be 16px.

:root {
    --body-text-size: 16px;
    --body-text-line: 1.5;
}

Change #

To change the default values with your own, you need to create your basis.scss and then replacing the values that are necessary.

Put basis.scss in the SCSS variables of your project. See also How to use to learn more about how to create your project and extend Superkube.

// your project
superkube/
vars/
    basis.scss
vars.scss
main.scss

Next, import basis.scss in your custom framework settings in the vars.scss file.

// vars.scss
@import "vars/basis";

Now you can change the framework values to your own.

// basis.scss
:root {
    --font-text: Lato, 'Helvetica Neue', Arial, sans-serif;
    --body-text-line: 1.618;
}

As a result, the framework will be built with the text font you specify and a new line-height for the body text.

If you change a unit variable, don't forget to change it in the root variables like this:

// basis.scss
// change SCSS variable
$unit: 5px;

// change root variable
:root {
    --unit: #{$unit};
}