Border

Usage #

All border classes have the b- 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.

• b-dark
• b-dark-low
• b-dark-medium
• b-light
• b-light-low
• b-light-medium
• b-primary

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

<div class="b-dark"></div>
<div class="b-dark-low"></div>
<div class="b-dark-medium"></div>
<div class="b-primary"></div>
<div class="b-light"></div>
<div class="b-light-low"></div>
<div class="b-light-medium"></div>

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

• b-top
• b-bottom
• b-left
• b-right

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

Scales #

By default, the border module has several sizes.

• 1 — 1px
• 2 — 2px
• 4 — 4px

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

<div class="b-primary"></div>
<div class="b-primary b-2"></div>
<div class="b-primary b-4"></div>
<div class="b-primary b-bottom"></div>
<div class="b-primary b-bottom b-2"></div>
<div class="b-primary b-bottom b-4"></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="b-primary b-10"></div>
<div class="b-primary b-10 b-bottom"></div>

Colors #

For the border module, you can add a new color. Simply create the necessary class with the new color.

.b-accent {
    --border-color: var(--palette-orange-base);
}

Now you can use the new color modifier in HTML.

<div class="b-accent"></div>
<div class="b-accent b-bottom"></div>
<div class="b-accent b-2"></div>
<div class="b-accent b-4"></div>

Responsive #

These are the default responsive classes for the border.

• b-top-sm
• b-bottom-sm
• b-left-sm
• b-right-sm
• b-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="b-primary b-2 b-top b-left-sm"></div>
<div class="b-primary b-2 b-bottom-sm"></div>
<div class="b-primary b-2 b-off-sm"></div>

Turning off #

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

• b-off
• b-off-sm

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