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 colors for the backgrounds. Just add the new modifier to your CSS or SCSS.

.bg-accent {
    --background-color: var(--palette-orange-base);
}

In HTML it will look like this:

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

Gradient #

All gradient classes begin with the prefix gr-. 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 your own gradients, create classes and specify the background.

.gr-primary {
    --gradient-color: linear-gradient(
        180deg,
        var(--palette-primary-base),
        var(--palette-primary-dark)
    );
}
.gr-neutral {
    --gradient-color: linear-gradient(
        180deg,
        var(--palette-neutral-lightest),
        var(--palette-neutral-mid)
    );
}

Now you can use the created classes in HTML.

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

You can specify gradients with any direction, including radial.

.gr-primary-45 {
    --gradient-color: linear-gradient(
        45deg,
        var(--palette-primary-base),
        var(--palette-primary-dark)
    );
}
.gr-neutral-radial {
    --gradient-color: radial-gradient(
        var(--palette-neutral-lightest),
        var(--palette-neutral-mid)
    );
}

Here's how it looks in HTML.

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