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 variables to what you need.

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

    // change vars
    --button-height: 48px;
    --button-padding:  .4em 24px;
}

This also works if you use Superkube as a CSS library. In this case, you do not need to create a project and build it as SCSS. Just add your custom css to superkube.css without building it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/superkube@latest/dist/superkube.min.css">
<link rel="stylesheet" href="your-custom-button.css">

Colors map #

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-pink-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.

Scales map #

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: (
   16: 16px,
   24: 24px,
   32: 32px,
   48: 48px,
   64: 64px,
   128: 128px
)

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

image: (
   16: 16px,
   24: 24px,
   32: 32px,
   48: 48px,
   64: 64px,
   128: 128px,
   256: 256px
)