Borders
There is a base border module that can be extended with the
border-width, border-color, border-style modules. By default you
don't need to set a border color. It will just inherit whatever the
text color is for that dom node. You can target any side to put a border
on ie. top, right, bottom, left.
Border Base
Border
<div class="ba"> </div>
Border Top
<div class="bt"> </div>
Border Right
<div class="br"> </div>
Border Bottom
<div class="bb"> </div>
Border Left
<div class="bl"> </div>
Border Styles
Dashed
<div class="ba b--dashed"> </div>
Dotted
<div class="ba b--dotted"> </div>
Solid (default)
<div class="ba"> </div>
Border Widths
Solid (default)
<div class="ba bw1"> </div>
<div class="ba bw2"> </div>
<div class="ba bw3"> </div>
<div class="ba bw4"> </div>
<div class="ba bw5"> </div>
Dotted
<div class="ba b--dotted bw1"> </div>
<div class="ba b--dotted bw2"> </div>
<div class="ba b--dotted bw3"> </div>
<div class="ba b--dotted bw4"> </div>
<div class="ba b--dotted bw5"> </div>
Dashed
<div class="ba b--dashed bw1"> </div>
<div class="ba b--dashed bw2"> </div>
<div class="ba b--dashed bw3"> </div>
<div class="ba b--dashed bw4"> </div>
<div class="ba b--dashed bw5"> </div>
Border Colors
<div class="ba b--black"> </div>
<div class="ba b--near-black"> </div>
<div class="ba b--dark-gray"> </div>
<div class="ba b--mid-gray"> </div>
<div class="ba b--gray"> </div>
<div class="ba b--silver"> </div>
<div class="ba b--light-silver"> </div>
<div class="ba b--light-gray"> </div>
<div class="ba b--near-white"> </div>
<div class="ba b--white"> </div>
<div class="ba b--white-90"> </div>
<div class="ba b--white-80"> </div>
<div class="ba b--white-70"> </div>
<div class="ba b--white-60"> </div>
<div class="ba b--white-50"> </div>
<div class="ba b--white-40"> </div>
<div class="ba b--white-30"> </div>
<div class="ba b--white-20"> </div>
<div class="ba b--white-10"> </div>
<div class="ba b--white-05"> </div>
<div class="ba b--white-025"> </div>
<div class="ba b--black"> </div>
<div class="ba b--black-90"> </div>
<div class="ba b--black-80"> </div>
<div class="ba b--black-70"> </div>
<div class="ba b--black-60"> </div>
<div class="ba b--black-50"> </div>
<div class="ba b--black-40"> </div>
<div class="ba b--black-30"> </div>
<div class="ba b--black-20"> </div>
<div class="ba b--black-10"> </div>
<div class="ba b--black-05"> </div>
<div class="ba b--black-025"> </div>
<div class="ba b--dark-red"> </div>
<div class="ba b--orange"> </div>
<div class="ba b--brown"> </div>
<div class="ba b--gold"> </div>
<div class="ba b--yellow"> </div>
<div class="ba b--purple"> </div>
<div class="ba b--dark-purple"> </div>
<div class="ba b--hot-pink"> </div>
<div class="ba b--dark-pink"> </div>
<div class="ba b--pink"> </div>
<div class="ba b--dark-green"> </div>
<div class="ba b--green"> </div>
<div class="ba b--olive-green"> </div>
<div class="ba b--teal"> </div>
<div class="ba b-dark-teal"> </div>
<div class="ba b--navy"> </div>
<div class="ba b--dark-blue"> </div>
<div class="ba b--blue"> </div>
<div class="ba b--blue-gray"> </div>
<div class="ba b--light-blue"> </div>
<div class="ba b--lightest-blue"> </div>
<div class="ba b--washed-red"> </div>
<div class="ba b--washed-green"> </div>
<div class="ba b--washed-yellow"> </div>
<div class="ba b--light-pink"> </div>
<div class="ba b--light-yellow"> </div>
<div class="ba b--light-red"> </div>
/*
BORDERS
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
@media (--breakpoint-not-small) {
.ba-ns { border-style: solid; border-width: 1px; }
.bt-ns { border-top-style: solid; border-top-width: 1px; }
.br-ns { border-right-style: solid; border-right-width: 1px; }
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-ns { border-left-style: solid; border-left-width: 1px; }
.bn-ns { border-style: none; border-width: 0; }
}
@media (--breakpoint-medium) {
.ba-m { border-style: solid; border-width: 1px; }
.bt-m { border-top-style: solid; border-top-width: 1px; }
.br-m { border-right-style: solid; border-right-width: 1px; }
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-m { border-left-style: solid; border-left-width: 1px; }
.bn-m { border-style: none; border-width: 0; }
}
@media (--breakpoint-large) {
.ba-l { border-style: solid; border-width: 1px; }
.bt-l { border-top-style: solid; border-top-width: 1px; }
.br-l { border-right-style: solid; border-right-width: 1px; }
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-l { border-left-style: solid; border-left-width: 1px; }
.bn-l { border-style: none; border-width: 0; }
}
/*
BORDER STYLES
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }
@media (--breakpoint-not-small) {
.b--dotted-ns { border-style: dotted; }
.b--dashed-ns { border-style: dashed; }
.b--solid-ns { border-style: solid; }
.b--none-ns { border-style: none; }
}
@media (--breakpoint-medium) {
.b--dotted-m { border-style: dotted; }
.b--dashed-m { border-style: dashed; }
.b--solid-m { border-style: solid; }
.b--none-m { border-style: none; }
}
@media (--breakpoint-large) {
.b--dotted-l { border-style: dotted; }
.b--dashed-l { border-style: dashed; }
.b--solid-l { border-style: solid; }
.b--none-l { border-style: none; }
}
/*
BORDER WIDTHS
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
@media (--breakpoint-not-small) {
.bw0-ns { border-width: 0; }
.bw1-ns { border-width: .125rem; }
.bw2-ns { border-width: .25rem; }
.bw3-ns { border-width: .5rem; }
.bw4-ns { border-width: 1rem; }
.bw5-ns { border-width: 2rem; }
.bt-0-ns { border-top-width: 0; }
.br-0-ns { border-right-width: 0; }
.bb-0-ns { border-bottom-width: 0; }
.bl-0-ns { border-left-width: 0; }
}
@media (--breakpoint-medium) {
.bw0-m { border-width: 0; }
.bw1-m { border-width: .125rem; }
.bw2-m { border-width: .25rem; }
.bw3-m { border-width: .5rem; }
.bw4-m { border-width: 1rem; }
.bw5-m { border-width: 2rem; }
.bt-0-m { border-top-width: 0; }
.br-0-m { border-right-width: 0; }
.bb-0-m { border-bottom-width: 0; }
.bl-0-m { border-left-width: 0; }
}
@media (--breakpoint-large) {
.bw0-l { border-width: 0; }
.bw1-l { border-width: .125rem; }
.bw2-l { border-width: .25rem; }
.bw3-l { border-width: .5rem; }
.bw4-l { border-width: 1rem; }
.bw5-l { border-width: 2rem; }
.bt-0-l { border-top-width: 0; }
.br-0-l { border-right-width: 0; }
.bb-0-l { border-bottom-width: 0; }
.bl-0-l { border-left-width: 0; }
}
/*
BORDER COLORS
Border colors can be used to extend the base
border classes ba,bt,bb,br,bl found in the _borders.css file.
The base border class by default will set the color of the border
to that of the current text color. These classes are for the cases
where you desire for the text and border colors to be different.
Base:
b = border
Modifiers:
--color-name = each color variable name is also a border color name
*/
.b--black { border-color: var(--black); }
.b--near-black { border-color: var(--near-black); }
.b--dark-gray { border-color: var(--dark-gray); }
.b--mid-gray { border-color: var(--mid-gray); }
.b--gray { border-color: var(--gray); }
.b--silver { border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--moon-gray { border-color: var(--moon-gray); }
.b--light-gray { border-color: var(--light-gray); }
.b--near-white { border-color: var(--near-white); }
.b--white { border-color: var(--white); }
.b--white-90 { border-color: var(--white-90); }
.b--white-80 { border-color: var(--white-80); }
.b--white-70 { border-color: var(--white-70); }
.b--white-60 { border-color: var(--white-60); }
.b--white-50 { border-color: var(--white-50); }
.b--white-40 { border-color: var(--white-40); }
.b--white-30 { border-color: var(--white-30); }
.b--white-20 { border-color: var(--white-20); }
.b--white-10 { border-color: var(--white-10); }
.b--white-05 { border-color: var(--white-05); }
.b--white-025 { border-color: var(--white-025); }
.b--white-0125 { border-color: var(--white-0125); }
.b--black-90 { border-color: var(--black-90); }
.b--black-80 { border-color: var(--black-80); }
.b--black-70 { border-color: var(--black-70); }
.b--black-60 { border-color: var(--black-60); }
.b--black-50 { border-color: var(--black-50); }
.b--black-40 { border-color: var(--black-40); }
.b--black-30 { border-color: var(--black-30); }
.b--black-20 { border-color: var(--black-20); }
.b--black-10 { border-color: var(--black-10); }
.b--black-05 { border-color: var(--black-05); }
.b--black-025 { border-color: var(--black-025); }
.b--black-0125 { border-color: var(--black-0125); }
.b--dark-red { border-color: var(--dark-red); }
.b--red { border-color: var(--red); }
.b--light-red { border-color: var(--light-red); }
.b--orange { border-color: var(--orange); }
.b--gold { border-color: var(--gold); }
.b--yellow { border-color: var(--yellow); }
.b--dark-yellow { border-color: var(--dark-yellow); }
.b--light-yellow { border-color: var(--light-yellow); }
.b--purple { border-color: var(--purple); }
.b--dark-purple { border-color: var(--dark-purple); }
.b--dark-pink { border-color: var(--dark-pink); }
.b--hot-pink { border-color: var(--hot-pink); }
.b--pink { border-color: var(--pink); }
.b--light-pink { border-color: var(--light-pink); }
.b--dark-green { border-color: var(--dark-green); }
.b--green { border-color: var(--green); }
.b--olive-green { border-color: var(--olive-green); }
.b--teal { border-color: var(--teal); }
.b--navy { border-color: var(--navy); }
.b--dark-blue { border-color: var(--dark-blue); }
.b--blue { border-color: var(--blue); }
.b--blue-gray { border-color: var(--blue-gray); }
.b--light-blue { border-color: var(--light-blue); }
.b--lightest-blue { border-color: var(--lightest-blue); }
.b--washed-blue { border-color: var(--washed-blue); }
.b--washed-green { border-color: var(--washed-green); }
.b--washed-yellow { border-color: var(--washed-yellow); }
.b--washed-red { border-color: var(--washed-red); }
.b--transparent { border-color: var(--transparent); }