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.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>