Modules
Border
This module helps to specify borders of different colors, sizes and styles.
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>