Border

Usage #

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

// Colors
$colors: (
    ...
    border: (
        alpha: rgba(palette(black), .1),
        bravo: palette(black)
    )
    ...
);

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

Classes specify three properties: color, size and style.

color

• b-{color}

size

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

style

• b-dashed
• b-dotted

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

<div class="item b-2 b-dashed b-alpha">
    <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 bravo:

<div class="item b-top-1 b-bravo">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>

Off #

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

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

Behavior on small screens #

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

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

<div class="item b-2 b-alpha b-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 b-2 b-alpha b-1-sm">
    <div class="item-head">...</div>
    <div class="item-body">...</div>
</div>