Background

Usage #

All background classes begin with the prefix bg-. Superkube generates several default background classes.

• bg-dark
• bg-light
• bg-primary
• bg-aluminum
• bg-silver
• bg-platinum

<div class="bg-dark"></div>
<div class="bg-light"></div>
<div class="bg-primary"></div>
<div class="bg-aluminum"></div>
<div class="bg-silver"></div>
<div class="bg-platinum"></div>

Colors #

You can add your own background colors extend the $colors and $palette maps. See also how to work with colors for modules.

To add a new color for a module, first make sure that it is in the color palette. If not, add a new color to $palette.

// =Palette
$palette: map-extend($palette, (
    yellow: (
        base: #FFBB00
    )
));

Now extend the colors of the module with a new modifier and add colors from the palette.

// =Colors
$colors: map-extend($colors, (
    background: (
        accent: palette(yellow, base),
        primary: palette(primary, base)
    )
));

Note: In the example above, the accent color was not in the palette and we added it, but the primary color was already in the Superkube palette by default, so it did not need to be added to the palette.

Now Superkube will automatically generate new background color classes.

<div class="bg-accent"></div>
<div class="bg-primary"></div>

Gradient #

All gradient classes begin with the prefix gr-. Superkube automatically generates gradient classes as well as background classes. But by default, Superkube does not have the specified gradient colors, because often these are unique colors in each individual project and it is better to specify them as needed.

To add background colors with a gradient, extend $colors and specify the colors from and to, as well as the optional direction of gradient or radial gradient.

// =Colors
$colors: map-extend($colors, (
    gradient: (
        primary: (
            from: palette(primary, base),
            to: palette(primary, dark)
        ),
        neutral: (
            from: palette(neutral, lightest),
            to: palette(neutral, mid)
        )
    )
));

Superkube will automatically generate the specified background gradients with the classes gr-primary and gr-neutral.

<div class="gr-primary"></div>
<div class="gr-neutral"></div>

By default, gradients are generated at an angle of 180deg, that is, from top to bottom. This can be changed by adding the deg parameter with the direction of the gradient in degrees when specifying colors. If you set deg to radial, the gradient will be radial.

// =Colors
$colors: map-extend($colors, (
    gradient: (
        primary-45: (
            from: palette(primary, base),
            to: palette(primary, dark),
            deg: 45deg
        ),
        neutral-radial: (
            from: palette(neutral, lightest),
            to: palette(neutral, mid),
            deg: radial
        )
    )
));

Superkube will automatically generate the specified background gradients with the classes gr-primary-45 and gr-neutral-radial.

<div class="gr-primary-45"></div>
<div class="gr-neutral-radial"></div>