Border

Usage #

Superkube automatically generates border classes with bd- prefix based on variables. To generate the colors and border sizes you need to specify them in your vars.scss, for example:

// Colors
$colors: (
    ...
    border: (
        primary: rgba(palette(black), .1),
        secondary: palette(black)
    )
    ...
);

// Size
$borders: (
    1: 1px,
    2: 2px
);

Classes specify three properties: color, size and style.

color

• bd-{color}

size

• bd-{size}
• bd-left-{size}
• bd-right-{size}
• bd-top-{size}
• bd-bottom-{size}

style

• bd-dashed
• bd-dotted

Here is an example of a border with 2px on all sides, the primary color and the dashed style:

<div class="item bd-2 bd-dashed bd-primary">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>

And here is how to specify a border with the size of 1px on the top and the color secondary:

<div class="item bd-top-1 bd-secondary">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>

Off #

The module has a bd-off class to disable the border of the element.

<div class="item bd-off">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>

Behavior on small screens #

• bd-off-sm
• bd-{size}-sm
• bd-left-{size}-sm
• bd-right-{size}-sm
• bd-top-{size}-sm
• bd-bottom-{size}-sm

Here is an example of turn off the border on small screens.

<div class="item bd-2 bd-primary bd-off-sm">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>

This is how you can change the size of the border on small screens.

<div class="item bd-2 bd-primary bd-1-sm">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>