Colour

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 colour as a presentation element for either decorative purposes or to convey information.

Design and coding

Basic use

Muted

Use to make text appear gray (muted) in colour.

Appearance

This text is styled with .text-muted.

Coloured icon:

Correct use

Compliance point(s):

Use to de-emphasize text (make less obvious)
Wrap text in a  tag if a style does not appear as it is meant to, due to specificity reasons

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Muted text:
<p class="text-muted">...</p>

//  Muted icon:
<span class="fa fa-adjust text-muted"></span>

Primary colour

Use to style primary information. The options include medium blue text, an icon of a blue drip, or white text with a medium blue background.

Appearance

This text is styled with .text-primary.

Coloured icon:

This text is styled with .bg-primary.

Correct use

Compliance point(s):

Use to match text to the main colour palette of the site
Wrap text in a  tag if a style does not appear as it is meant to, due to specificity reasons
Be aware that blue text can cause usability problems, as it can be mistaken for a link

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Primary text:
<p class="text-primary">...</p>

// Primary icon:
<span class="fa fa-tint text-primary"></span>

// Primary background:
<p class="bg-primary">...</p>

Success colour

Use to style success information. This style includes options for green text, an icon of a green check mark, or default text with a pale green background.

Appearance

This text is styled with .text-success.

Coloured icon:

This text is styled with .bg-success.

Correct use

Compliance point(s):

Use to suggest that the content is correct or the right way of doing something
Wrap text in a  tag if a style does not appear as it is meant to due to specificity reasons

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Success text:
<p class="text-success">...</p>

// Success icon:
<span class="fa fa-check text-success"></span>

// Success background:
<p class="bg-success">...</p>

Info colour

Use to style fairly important information. This style includes options for blue text, an icon of a blue "i", or default text with a pale blue background.

Appearance

This text is styled with .text-info.

Coloured icon:

This text is styled with .bg-info.

Correct use

Compliance point(s):

Use to highlight fairly important information
Wrap text in a  tag if a style does not appear as it is meant to due to specificity reasons

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Info text:
<p class="text-info">...</p>

// Info icon:
<span class="fa fa-info text-info"></span>

// Info background:
<p class="bg-info">...</p>

Warning colour

Use to style warning information. This style includes options for brown text, an icon of a brown exclamation mark in a triangle, or default text with a pale golden-brown background.

Appearance

This text is styled with .text-warning.

Coloured icon:

This text is styled with .bg-warning.

Correct use

Compliance point(s):

Use to call attention to the content and warn the user of something
Wrap text in a  tag if a style does not appear as it is meant to due to specificity reasons

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Warning text:
<p class="text-warning">...</p>

// Warning icon:
<span class="fa fa-exclamation-triangle text-warning"></span>

// Warning background:
<p class="bg-warning">...</p>

Danger colour

Use to style very important information. This style includes options for red text, an icon of a red exclamation mark in a circle, or default text with a pale red background.

Appearance

This text is styled with .text-danger.

Coloured icon:

This text is styled with .bg-danger.

Correct use

Compliance point(s):

Use to call attention to very important content, and advise the user that an action is dangerous
Wrap text in a  tag if a style does not appear as it is meant to due to specificity reasons

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use as the only way to communicate information or intent, as colour alone is not accessible

Code

// Danger text:
<p class="text-danger">...</p>


// Danger icon:
<span class="fa fa-exclamation-circle text-danger"></span>

// Danger background:
<p class="bg-danger">...</p>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Icons

Supporting principles

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified:: 2019-04-11