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 number at the end to indicate the opacity of the border color.

• b-dark-7
• b-dark-10
• b-light-25
• b-primary

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

<div class="b-dark-7"></div>
<div class="b-dark-10"></div>
<div class="b-primary"></div>
<div class="b-light-25"></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

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

<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. Just extend the colors of the module with a new modifier and add the color from the palette. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    border: (
        accent: palette(positive, base)
    )
);

Note: You must first add a color to the palette if it's not already there, and only then use the colors from the palette in $colors. Here's more on how to work with colors in Superkube.

In this case, Superkube will automatically generate the b-accent modifier with the specified color.

<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-7 b-off-sm"></div>