Border

Usage #

All border classes have the border- prefix in their names. By default, Superkube has several color options for the borders. We usually use the low, medium, high keywords to indicate the opacity of the border color. Where low is the lightest or has more transparency, and high is the darkest or has less transparency.

• border-dark
• border-dark-low
• border-dark-mid
• border-light
• border-light-low
• border-light-mid
• border-primary

If only a color class is specified, it will be on all sides and 1px in size.

<div class="border-dark"></div>
<div class="border-dark-low"></div>
<div class="border-dark-mid"></div>
<div class="border-primary"></div>
<div class="border-light"></div>
<div class="border-light-low"></div>
<div class="border-light-mid"></div>

You can specify for what side the border should be shown using the helper classes.

• border-top
• border-bottom
• border-left
• border-right

<div class="border-primary border-top"></div>
<div class="border-primary border-bottom"></div>
<div class="border-primary border-left"></div>
<div class="border-primary border-right"></div>

Variables #

Superkube automatically generates border 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 border variables begin with the --border prefix.

--border-dark: var(--palette-black);
--border-dark-low: var(--palette-black-7);
--border-dark-mid: var(--palette-black-10);
--border-light: var(--palette-white);
--border-light-low: var(--palette-white-20);
--border-light-mid: var(--palette-white-50);
--border-primary: var(--palette-primary-base);

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

.my-module {
    border: 1px solid var(--border-dark-low);
}

Extend #

You can add your own colors for the border 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, (
    border: (
        primary: var(--palette-primary-dark),
        accent: var(--palette-orange-base)
    )
));

First, in this example we change the primary border color. While the default for the border-primary class and for the --border-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 border and you can apply it in HTML by specifying a class.

<div class="border-accent"></div>
<div class="border-accent border-bottom"></div>
<div class="border-accent border-2"></div>

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

.my-module {
    border: 1px solid var(--border-accent);
}

Scales #

By default, the border helper has several sizes.

• 1 — 1px
• 2 — 2px

The size is specified as class border-{size}. The sizes work for all sides as well as when only one side is specified.

<div class="border-primary"></div>
<div class="border-primary border-2"></div>
<div class="border-primary border-bottom"></div>
<div class="border-primary border-bottom border-2"></div>

Add scale

To add a new border width value, you can extend the $scales map. See also how to work with Scales.

// =Scales
$scales: map-extend($scales, (
    border: (
        10: 10px
    )
);

After building the SCSS framework with the new scales values for the border, you can use the new width modifier.

<div class="border-primary border-10"></div>
<div class="border-primary border-10 border-bottom"></div>

Responsive #

These are the default responsive classes for the border.

• border-top-sm
• border-bottom-sm
• border-left-sm
• border-right-sm
• border-off-sm

Responsive classes can change the behavior of borders on small screens. For example, a border on all sides becomes only on the left side for the small screens. Or on small screens, all borders are turned off.

<div class="border-primary border-2 border-top border-left-sm"></div>
<div class="border-primary border-2 border-bottom-sm"></div>
<div class="border-primary border-2 border-off-sm"></div>

Turning off #

The border helper has classes to turn off borders. For example, if your card has borders by default, you can turn them off with border-off for some cards.

• border-off
• border-off-sm

<div class="card border-off"></div>
<div class="card border-dark-low border-off-sm"></div>