Customize

CSS variables #

Thanks to the fact that all Superkube modules are built using CSS variables, the framework is easy to add and modify. Add the module file you want to change to your project.

// your project
superkube/
modules/
    button.scss
modules.scss
main.scss

Next, import module file (it is button.scss in our example) in your custom framework modules in the modules.scss.

// modules.scss
@import "modules/button";

Now just change the colors and params to what you need. All module parameters, you can find in the description of each module.

.button {
    // change colors
    --button-background-color: var(--palette-positive-base);
    --button-border-color: transparent;
    --button-color: var(--palette-positive-lightest);
    --button-hover-background-color: var(--palette-positive-dark);
    --button-hover-border-color: transparent;
    --button-hover-color: var(--palette-positive-lightest);
    --button-disabled-background-color: var(--palette-black);
    --button-disabled-border-color: transparent;
    --button-disabled-color: var(--palette-neutral-lightest);

    // change params
    --button-height: 48px;
    --button-padding-x: 24px;
}

Basis #

Basis is the base settings of the framework, which can be changed using SCSS builds or by specifying settings via css variables. See more about Basis.

To extend or change the default values of basis, you need to create your basis.scss file. 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";

Inside the basis.scss file, you can override the framework settings. Basis contains two kinds of settings.

The first ones are defined as SCSS variables, such as the dark theme setting:

$dark-theme: true;

The second ones are defined as CSS variables, such as font settings:

:root {
    --font-text: 'Source Sans Pro', sans-serif;
}

Palette #

The palette is a set of all the colors of the project that can be used in the various modules and their settings. See more about Palette.

To extend or change the default values of palette, you need to create your palette.scss file that you want to add or change colors. And then extend $palette map in it. See also How to use to learn more about how to create your project and extend Superkube.

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

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

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

Now you can extend or change colors in the palette.scss file with map-extend function.

// =Palette
$palette: map-extend($palette, (
    black: #000,
    red-orange: (
        base: #F55E1F
    )
));

In the example above, we replace the color black with another shade. We also add a new red-orange color.

As a result, the framework will create a new global variable --palette-red-orange-base for the new color and the --palette-black variable will have the updated black color.

Use them in your CSS/SCSS:

.my-module {
    // colors
    --module-background-color: var(--palette-red-orange-base);
    --module-color: var(--palette-black);

    // props
    background-color: var(--module-background-color);
    color: var(--module-color);
}

Colors #

Colors are global framework colors that are automatically generated as classes for some modules or available in CSS/SCSS as css variables. See more about Colors.

To extend or change the default values of colors, you need to create your colors.scss file that you want to add or change colors. And then extend $colors map in it. See also How to use to learn more about how to create your project and extend Superkube.

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

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

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

Now you can extend or change colors in the colors.scss file with map-extend function.

// =Colors
$colors: map-extend($colors, (
    background: (
        accent: var(--palette-yellow-base)
    ),
    text: (
        muted: var(--palette-black-40)
    )
));

In the example above, we replace the color of the text-muted modifier with a more muted one. We also add a new background accent color, which will automatically create the bg-accent modifier class.

Also, the framework will create a new global variable --background-accent for the new color and the --text-muted variable will have the updated color.

Use them in your CSS/SCSS:

.my-module {
    background-color: var(--background-accent);
}
.my-another-module {
    color: var(--text-muted);
}

Scales #

Scales are sets of different module parameters, typography and all other scales from which the framework generates utilities or modifiers. Scales.

To extend the default values or replace existing values with your own, you need to create your scales.scss and then extend $scales map in it.

Put scales.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/
    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 $scales in the scales.scss file with map-extend function.

// =Scales
$scales: map-extend($scales, (
    image: (
        256: 256px
    )
));

The default image scale has these values:

image: (
   32: 32px,
   48: 48px,
   64: 64px,
   96: 96px,
   128: 128px
)

After extending, a new value will be added and the scale will look like this:

image: (
   32: 32px,
   48: 48px,
   64: 64px,
   96: 96px,
   128: 128px,
   256: 256px
)

Modules #

By default, if you build your project based on Superkube, you connect all modules that are prebuilt for the framework.

// =main.scss

// =vars
@import "superkube/vars";

// =core & modules
@import "superkube/core";
@import "superkube/modules";

You can choose which modules you want to use simply by specifying them:

// =main.scss

// =vars
@import "superkube/vars";

// =core
@import "superkube/core";

// import specified modules
@import "superkube/modules/button";
@import "superkube/modules/input";
@import "superkube/modules/text";

See also How to use to learn more about how to create your project and extend Superkube.