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); }