Language selection

Search

Borders

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to add single or multiple borders to design elements in order to separate or call attention to content. Additionally, remove default borders or sharpen corners that appear in design components such as a "well".

Design and coding

Basic use

¯¯¯ Left border

Use to add a left border to an element. If applied to grids, the border appears on the outside edge of the 15px gutter.

Appearance



Correct use

Compliance point(s):

  • Use .brdr-lft to add a left border
  • Use to separate or set apart content
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="col-md-12 brdr-lft">...</div>

Use to add a right border to an element. If applied to grids, the border appears on the outside edge of the 15px gutter.

Appearance



Correct use

Compliance point(s):

  • Use .brdr-rght to add a right border
  • Use to separate or set apart content
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="col-md-12 brdr-rght">...</div>

¯¯¯ Top border

Use to add a top border to an element.

Appearance



Correct use

Compliance point(s):

  • Use .brdr-tp to add a top border
  • Use to separate or set apart content
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="col-md-12 brdr-tp">...</div>

¯¯¯ Bottom border

Use to add a bottom border to an element.

Appearance



Correct use

Compliance point(s):

  • Use .brdr-bttm to add a bottom border
  • Use to separate or set apart content
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="col-md-12 brdr-bttm">...</div>

Enhanced use

¯¯¯ Horizontal rule <hr>

Use to apply a border to an <hr> to darken it.

Appearance

Default:

Darkened:

Correct use

Compliance point(s):

  • Use to define a thematic change in the content, as per the correct us of an <hr>
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Default:
<hr>

// Darkened:
<hr class="brdr-bttm">

⌈ Remove border radius

Use to remove the border radius from a design component, like a well.

Appearance

Default

No radius

Default
No radius
Correct use

Compliance point(s):

  • Use .brdr-rds-0 to remove the radius of a border in a panel or a well
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No radius in a panel:
<div class="brdr-rds-0 panel panel-default">
...
</div>

// No radius in a well:
<div class="brdr-rds-0 well">
...
</div>

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

The Principle of Common Region states that objects that are within the same demarcated (bordered) region are perceived as grouped together.

Date modified: