← Superkube / Documentation 2.1.1
Concepts

Variants

Variants create modifiers of different kinds of one module.

Overview #

Some modules in Superkube have modifiers that change the appearance. This is almost always defined in $variants map in the variants.scss file. By changing the variant settings or adding your variants, you can change and create different appearance of the same module.

Extend #

To extend the default values of variants, you need to create your variants.scss and separate files for the modules that you want to add or change variants. And then extend $variants map in them.


// your project
superkube/
variants/
    alert.scss
variants.scss
main.scss

Next, import all modules variant files in the variants.scss.


// variants.scss
@import "variants/alert";

Now you can extend variants in the module variant file with map-extend function.


// variants/alert.scss
$variants: map-extend($variants, (
    alert: (
        large: (
            padding: 8rem 10rem,
            border-radius: radius(huge)
        )
    )
));

In this example, we add an Alert variant with a large padding and border-radius.

As a result, this variant will be added to the $variants map to the one that was already by default:


alert: (
    default: (
        padding: 4rem 5rem,
        border-radius: radius(base),
        border: 1px solid transparent
    ),
    large: (
        padding: 8rem 10rem,
        border-radius: radius(huge)
    )
)

Superkube will automatically generate a new module modifier. And you can use it in HTML.


<div class="alert alert-large">...</div>

The variants specify CSS properties. This allows to automatically generate styles and in CSS output will turn out like this:


.alert-large {
    padding: 8rem 10rem;
    border-radius: 8px;
}

Change #

Changing the default values works on the same principle. You extend $variants by specifying a new value and it changes when Superkube is built.


// =Variants
$variants: map-extend($variants, (
    alert: (
        default: (
            border-radius: radius(huge)
        )
    )
));

In the example above, we change the value of the rounded corners in the Alert module from base to large.