Background

Usage #

All background classes begin with the bg- prefix. By default, Superkube has several background variants:

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

Use them in your HTML:

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

Variables #

Superkube automatically generates background variants as global css variables that you can use in your custom CSS/SCSS. The color variants are generated based on the values specified in $colors map. See more about Colors.

All background variables begin with the --background prefix.

--background-light: var(--palette-white);
--background-dark: var(--palette-black);
--background-primary: var(--palette-primary-base);
--background-aluminum: var(--palette-neutral-lightest);
--background-silver: var(--palette-neutral-lighter);
--background-platinum: var(--palette-neutral-light);

You can use variables in your CSS/SCSS code like this:

.my-module {
    background-color: var(--background-aluminum);
}

Extend #

You can add your own colors for the background or change existing colors. To do this, extend $colors map with a new color variant or modify an existing one. See more about how to extend the colors of the framework.

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

First, in this example we change the primary background color. While the default for the bg-primary class and for the --background-primary global variable was the base primary hue from the palette, we have now changed it to a darker one.

Second, this will create a new accent background and you can apply it in HTML by specifying a class.

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

The framework will also automatically create a new global background variable that you can use in your CSS/SCSS:

.my-module {
    background-color: var(--background-accent);
}

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, extend $colors map with new colors.

// =Colors
$colors: map-extend($colors, (
    gradient: (
        primary: linear-gradient(
            180deg,
            var(--palette-primary-mid),
            var(--palette-primary-dark)
        ),
        neutral: linear-gradient(
            180deg,
            var(--palette-neutral-lightest),
            var(--palette-neutral-mid)
        )
    )
));

The framework will automatically generate gradient classes that you can use in HTML:

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

It will also automatically create global css variables for gradients that you can use in your CSS/SCSS:

.my-module {
    background: var(--gradient-primary);
}

You can specify gradients with any direction, including radial.

// =Colors
$colors: map-extend($colors, (
    gradient: (
        primary-45: linear-gradient(
            45deg,
            var(--palette-primary-mid),
            var(--palette-primary-dark)
        ),
        neutral-radial: 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>

And the appropriate css variables:

--gradient-primary-45
--gradient-neutral-radial