<%= head %> <%= siteHeader %>

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.

Examples

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--dark-red"> </div> <div class="ba b--red"> </div>
<div class="ba b--orange"> </div>
<div class="ba b--gold"> </div>
<div class="ba b--yellow"> </div>
<div class="ba b--purple"> </div>
<div class="ba b--light-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--navy"> </div>
<div class="ba b--dark-blue"> </div>
<div class="ba b--blue"> </div>
<div class="ba b--light-blue"> </div>
<div class="ba b--lightest-blue"> </div>
<div class="ba b--washed-blue"> </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>

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>
src/_borders.css

<%= srccss %>

src/_border-style.css

<%= srccss3  %>

src/_border-colors.css

<%= srccss2  %>

src/_border-widths.css

<%= srccss4  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>