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.scss in $colors
map.
For example, the following background colors can be specified in $colors
:
// Map in vars.scss
$colors: (
...
background: (
dark: palette(black),
primary: palette(white),
secondary: palette(neutral, lighter)
)
...
);
Superkube will generate such classes based on these variables:
- bg-dark
- bg-primary
- bg-secondary
The background classes can be mixed for other modules or for blocks inside them.
<div class="item bg-primary">
<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.scss
$colors: (
...
gradient: (
primary: (
from: palette(white),
top: palette(neutral, lighter)
),
secondary: (
from: palette(neutral, darker),
to: palette(black)
)
)
...
);
Superkube will generate such gradient classes based on these variables:
- gr-primary
- gr-secondary
The gradient classes can be mixed for other modules or for blocks inside them.
<div class="item gr-primary">
<div class="item-head">...</div>
<div class="item-body">...</div>
</div>