Border
A series of thematic classes that adjust the border property of a selector, with support for responsive modifiers.
Install
npm install seed-border --save
Dependencies
Usage
.t-bdr supports responsive modifiers.
| Class | Borders applied on… |
|---|---|
.t-bdr |
top, right, bottom, left |
.t-bdr-top |
top |
.t-bdr-right |
right |
.t-bdr-bottom |
bottom |
.t-bdr-left |
left |
Example
I only have a border on the top.
I only have a border on the right.
I only have a border on the left.
Hah! I gots borders all over the place.
<div class="t-bdr-top u-pad-3 u-mrg-b-2">
I only have a border on the top.
</div>
<div class="t-bdr-right u-pad-3 u-mrg-b-2">
I only have a border on the right.
</div>
<div class="t-bdr-left u-pad-3 u-mrg-b-2">
I only have a border on the left.
</div>
<div class="t-bdr">
Hah! I gots borders all over the place.
</div>Border Radius
Border radiuses can be adjusted by adding a .t-bdr-r class.
| Class | Borders radius |
|---|---|
.t-bdr-r-0 |
0px |
.t-bdr-r-1 |
1px |
.t-bdr-r-2 |
2px |
.t-bdr-r-3 |
3px |
.t-bdr-r-4 |
4px |
.t-bdr-r-circle |
50% |
.t-bdr-r-pill |
9999px |
Example
I have a border radius of 3px!
I have a border radius of a lot of px!
<div class="t-bdr-r-3 u-pad-3 t-bg-blue-200 u-mrg-b-2">
I have a border radius of 3px!
</div>
<div class="t-bdr-r-pill u-pad-3 t-bg-green-200">
I have a border radius of a lot of px!
</div>Configurations
Below are the default Sass configuration variables for seed-border. The variables can be found in the pack’s _config.scss file.
seed-border/_config.scss// Namespaces
$seed-border-namespace: "t-bdr" !default;
$seed-border-radius-namespace: "#{$seed-border-namespace}-r" !default;
// Defaults
$seed-border-color: #eee !default;
$seed-border-radius: 3px !default;
$seed-border-size: 1px !default;
$seed-border-style: solid !default;
// Important (Typical convention for utility purposes)
$seed-border-use-important: true !default;
// Directions
$seed-border-directions: (
all: false,
top: "t",
right: "r",
bottom: "b",
left: "l",
none: false,
) !default;
$seed-border-radius-sizes: (
0: 0px,
1: 1px,
2: 2px,
3: 3px,
4: 4px,
circle: 50%,
pill: 9999px,
) !default;
// Base variable
$seed-border: $seed-border-size $seed-border-style $seed-border-color !default;