Background

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>