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.