Simplex

Utility classes

Border

Border utility classes allow authors to add borders in a range of predefined colors to any element.

Overall usage

Used to apply specific border properties to any element or component.

Accessibility

N/A

No border

u-bor-0
<div class="u-bor-0"></div>

Border on all sides

u-bor-a-primary
u-bor-a-secondary
u-bor-a-red
u-bor-a-green
u-bor-a-gray-90
u-bor-a-gray-85
u-bor-a-gray-80
u-bor-a-gray-75
u-bor-a-gray-70
u-bor-a-gray-65
u-bor-a-gray-60
u-bor-a-gray-55
u-bor-a-gray-50
u-bor-a-gray-45
u-bor-a-gray-40
u-bor-a-gray-35
u-bor-a-gray-30
u-bor-a-gray-25
u-bor-a-gray-20
u-bor-a-gray-15
u-bor-a-gray-10
u-bor-a-gray-5
<div class="u-bor-a-primary"></div>
<div class="u-bor-a-secondary"></div>
<div class="u-bor-a-red"></div>
<div class="u-bor-a-green"></div>
<div class="u-bor-a-gray-90"></div>
<div class="u-bor-a-gray-85"></div>
<div class="u-bor-a-gray-80"></div>
<div class="u-bor-a-gray-75"></div>
<div class="u-bor-a-gray-70"></div>
<div class="u-bor-a-gray-65"></div>
<div class="u-bor-a-gray-60"></div>
<div class="u-bor-a-gray-55"></div>
<div class="u-bor-a-gray-50"></div>
<div class="u-bor-a-gray-45"></div>
<div class="u-bor-a-gray-40"></div>
<div class="u-bor-a-gray-35"></div>
<div class="u-bor-a-gray-30"></div>
<div class="u-bor-a-gray-25"></div>
<div class="u-bor-a-gray-20"></div>
<div class="u-bor-a-gray-15"></div>
<div class="u-bor-a-gray-10"></div>
<div class="u-bor-a-gray-5"></div>

Border-top only

u-bor-t-primary
u-bor-t-secondary
u-bor-t-red
u-bor-t-green
u-bor-t-gray-90
u-bor-t-gray-85
u-bor-t-gray-80
u-bor-t-gray-75
u-bor-t-gray-70
u-bor-t-gray-65
u-bor-t-gray-60
u-bor-t-gray-55
u-bor-t-gray-50
u-bor-t-gray-45
u-bor-t-gray-40
u-bor-t-gray-35
u-bor-t-gray-30
u-bor-t-gray-25
u-bor-t-gray-20
u-bor-t-gray-15
u-bor-t-gray-10
u-bor-t-gray-5

<div class="u-bor-t-primary"></div>
<div class="u-bor-t-secondary"></div>
<div class="u-bor-t-red"></div>
<div class="u-bor-t-green"></div>
<div class="u-bor-t-gray-90"></div>
<div class="u-bor-t-gray-85"></div>
<div class="u-bor-t-gray-80"></div>
<div class="u-bor-t-gray-75"></div>
<div class="u-bor-t-gray-70"></div>
<div class="u-bor-t-gray-65"></div>
<div class="u-bor-t-gray-60"></div>
<div class="u-bor-t-gray-55"></div>
<div class="u-bor-t-gray-50"></div>
<div class="u-bor-t-gray-45"></div>
<div class="u-bor-t-gray-40"></div>
<div class="u-bor-t-gray-35"></div>
<div class="u-bor-t-gray-30"></div>
<div class="u-bor-t-gray-25"></div>
<div class="u-bor-t-gray-20"></div>
<div class="u-bor-t-gray-15"></div>
<div class="u-bor-t-gray-10"></div>
<div class="u-bor-t-gray-5"></div>

Border-bottom only

u-bor-b-primary
u-bor-b-secondary
u-bor-b-red
u-bor-b-green
u-bor-b-gray-90
u-bor-b-gray-85
u-bor-b-gray-80
u-bor-b-gray-75
u-bor-b-gray-70
u-bor-b-gray-65
u-bor-b-gray-60
u-bor-b-gray-55
u-bor-b-gray-50
u-bor-b-gray-45
u-bor-b-gray-40
u-bor-b-gray-35
u-bor-b-gray-30
u-bor-b-gray-25
u-bor-b-gray-20
u-bor-b-gray-15
u-bor-b-gray-10
u-bor-b-gray-5
<div class="u-bor-b-primary"></div>
<div class="u-bor-b-secondary"></div>
<div class="u-bor-b-red"></div>
<div class="u-bor-b-green"></div>
<div class="u-bor-b-gray-90"></div>
<div class="u-bor-b-gray-85"></div>
<div class="u-bor-b-gray-80"></div>
<div class="u-bor-b-gray-75"></div>
<div class="u-bor-b-gray-70"></div>
<div class="u-bor-b-gray-65"></div>
<div class="u-bor-b-gray-60"></div>
<div class="u-bor-b-gray-55"></div>
<div class="u-bor-b-gray-50"></div>
<div class="u-bor-b-gray-45"></div>
<div class="u-bor-b-gray-40"></div>
<div class="u-bor-b-gray-35"></div>
<div class="u-bor-b-gray-30"></div>
<div class="u-bor-b-gray-25"></div>
<div class="u-bor-b-gray-20"></div>
<div class="u-bor-b-gray-15"></div>
<div class="u-bor-b-gray-10"></div>
<div class="u-bor-b-gray-5"></div>
Copyright © 2019 Max Design
Github