Modules
Background
This module helps to set the background color or gradient.
Background #
All background classes begin with the prefix bg-
. These classes are automatically generated by Superkube based on the colors that are specified in your vars/colors
in $colors
map.
For example, the following background colors can be specified in $colors
:
// Map in vars/colors
$colors: (
...
background: (
dark: palette(black),
alpha: palette(white),
bravo: palette(neutral, lighter)
)
...
);
Superkube will generate such classes based on these variables:
- bg-dark
- bg-alpha
- bg-bravo
The background classes can be mixed for other modules or for blocks inside them.
<div class="item bg-alpha">
<div class="item-head">...</div>
<div class="item-body">...</div>
</div>
Gradient #
All gradient classes begin with the prefix gr-
. Superkube automatically generates gradient classes as well as background classes.
For example, the following gradient colors can be specified in $colors
:
// Map in vars/colors
$colors: (
...
gradient: (
alpha: (
from: palette(white),
top: palette(neutral, lighter)
),
bravo: (
from: palette(neutral, darker),
to: palette(black),
deg: 45deg // optional direction of gradient
)
)
...
);
Superkube will generate such gradient classes based on these variables:
- gr-alpha
- gr-bravo
The gradient classes can be mixed for other modules or for blocks inside them.
<div class="item gr-alpha">
<div class="item-head">...</div>
<div class="item-body">...</div>
</div>