Bootstrap CRH

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, assumenda commodi dolores ad adipisci perferendis voluptate unde harum aliquam non. Optio accusamus, alias voluptatum nesciunt omnis quibusdam ipsa neque non?

Color

CRH Primary Color Palette

The primary colour palette consists of dark and medium blue. Our primary blues are our most important colours and are used in the full color logo.

Black is used for the logo when colours are limited.

Dark Blue

Theme class suffix
.*-crh-blue-dark
CSS variable name
--crh-blue-dark

Medium Blue

Theme class suffix
.*-crh-blue-medium
CSS variable name
--crh-blue-medium

Black

Theme class suffix
.*-crh-black
CSS variable name
--crh-black

White

Theme class suffix
.*-crh-white
CSS variable name
--crh-white

CRH Secondary Color Palette

This palette comprises six pairs of supporting colors to reflect the pair of primary blues. They can be used to highlight text and to colour graphs and charts. Tints of these colours may also be used.

The use of any colors other than our primary or secondary colours is not permitted.

Dark Violet

Theme class suffix
.*-crh-violet-dark
CSS variable name
--crh-violet-dark

Bright Violet

Theme class suffix
*-crh-violet-bright
CSS variable name
--crh-violet-bright

Dark Red

Theme class suffix
.*-crh-red-dark
CSS variable name
--crh-red-dark

Bright Red

Theme class suffix
.*-crh-red-bright
CSS variable name
--crh-red-bright

Dark Orange

Theme class suffix
.*-crh-orange-dark
CSS variable name
--crh-orange-dark

Bright Orange

Theme class suffix
.*-crh-orange-bright
CSS variable name
--crh-orange-bright

Dark Green

Theme class suffix
.*-crh-green-dark
CSS variable name
--crh-green-dark

Bright Green

Theme class suffix
.*-crh-green-bright
CSS variable name
--crh-green-bright

Dark Teal

Theme class suffix
.*-crh-teal-dark
CSS variable name
--crh-teal-dark

Bright Teal

Theme class suffix
.*-crh-teal-bright
CSS variable name
--crh-teal-bright

Dark Grey

Theme class suffix
.*-crh-grey-dark
CSS variable name
--crh-grey-dark

Light Grey

Theme class suffix
.*-crh-grey-light
CSS variable name
--crh-grey-light

CRH-based Bootstrap Theme Colors

I have selected colors from CRH's primary and secondary color palettes that most closely match the Bootstrap theme colors, and have replaced the Bootstrap theme colors with the CRH equivalents (with the exception of the dark and light themes). This allows the developer to use bootstrap's default theme classes while adhering to the CRH style guide.

Primary

.*-primary .*-crh-blue-medium

Secondary

.*-secondary .*-crh-grey-light

Success

.*-success .*-crh-green-bright

Danger

.*-danger .*-crh-red-bright

Warning

.*-warning .*-crh-orange-bright

Info

.*-info .*-crh-teal-dark

Dark

.*-dark (Bootstrap default)

Light

.*-light (Bootstrap default)

Bootstrap's Theme Classes

Bootstrap provides a number of theme classes, allowing developers to style elements according to a theme palette. I have extended these theme classes to include CRH colors, and have also overridden Bootstrap's default theme colors with appropriate CRH colors (see CRH-based Bootstrap Theme Colors).

In this document, all asterisks in CSS class names (e.g., .*-crh-blue-dark) are merely placeholders representing the beginning of the Bootstrap theme class names (see examples below). To maintain consistency, use the theme class names wherever possible. If you need to apply colors using CSS, use the CSS variable names (e.g., var(--crh-blue-dark)).

Examples

While some of the examples below use the CRH-based theme class names directly, it is recommended to use the overridden Bootstrap theme class names (e.g., .btn-primary) where possible.

Target of Style Example Result
Text .text-primary This text has the primary color.
.text-crh-red-dark This text has the CRH Dark Green color.
Background .bg-crh-blue-medium I have a blue background.
.bg-warning I have a warning background.
Button .btn-crh-violet-dark
.btn-danger
.btn-outline-crh-teal-dark
Alert .alert-success
Success!
.alert-crh-orange-bright
Success!
Badge .badge-crh-black Black badge
.badge-warning Warning badge

UI Elements

Styling of UI elements is unchanged from Bootstrap's default styles. The only difference is that the elements use CRH's theme colors, rather than the default Bootstrap theme colors, because the theme colors have been overridden (see Bootstrap Theme Colors above). Therefore, not all Bootstrap UI elements are included in this demo—only the ones that appear differently because of the theme change. To see the other UI elements that are available in this package, see Bootstrap Components.

Alerts


<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

Badges


<span class="badge badge-primary">Primary</span>
Primary Secondary Success Danger Warning Info Light Dark

Buttons


<button type="button" class="btn btn-primary">Primary</button>

Progress Bars


<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Typography

Display 1

Display 1

.display-1

Note: Use this font only for large vertical headings.

Display 2

Display 2

.display-2

Display 3

Display 3

.display-3

Display 4

Display 4

.display-4

Heading 1

Heading 1

<h1> or .h1

Heading 2

Heading 2

<h2> or .h2

Heading 3

Heading 3

<h3> or .h3

Heading 4

Heading 4

<h4> or .h4

Heading 5

Heading 5

<h5> or .h5

Heading 6

Heading 6

<h6> or .h6

Intro copy Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo omnis maiores iure deserunt, sint mollitia unde, aliquam ad nisi cupiditate sed! Odit nemo ea veniam. Sit accusantium velit id illo.