Summary of features

The COLOURcode template builds on the excellent Bootstrap 3 framework, but recognises that Bootstrap has been designed more for spacious websites than busy application UIs. Accordingly, Bootstrap's default typographic spacings have been tightened up, and new SASS variables have been added to plug gaps in the Bootstrap framework e.g. $body-font-weight, $bold-color and $gray-mid, as well as variables to specifically and jointly control the margins of h1, h2 and h3 tags, and one to globally reduce all font sizes for smartphone viewports.

At a glance

Uses Bootstrap 3 SASS variables wherever possible.
Recognises that applications are not spacious websites.
Brand1 and brand2 colours can easily be altered.
Minimal CSS markup required for major style changes.
Focuses on legibility and usability over fashion.

Example of headings with body text

This is an example of the template's default text styling. This particular paragraph has been styled with a class of .lead.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Pre-styled bullet list item 1.
Pre-styled bullet list item 2.
Pre-styled bullet list item 3.

Heading 2

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem?

Heading 3

Nam libero tempore, impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum.

Changing the base font family or size is easy

This start of the template's _variables.scss file shows how simple it is to change the main typographic settings. Reducing the font size, for example, is as simple as replacing the '16px' on line 8, with '14px', and everything else scales down accordingly. You can also see some of the template's non-Bootstrap variables which are used to cascade throughout other stylesheets.

// ------------------------------------------------------------------------
// KEY VARIABLES changed or added for template
// ------------------------------------------------------------------------
@import url('http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic');
// Global font family on '<body>'.
$font-family-base: 'Ubuntu', 'Trebuchet MS', Helvetica, Arial, sans-serif;
// standard-Bootstrap font base size.
$font-size-base: 16px;
// non-Bootstrap variable used throughout _main.scss to reduce font sizes on phones.
$font-size-reduction-phones: 0.8;
// non-Bootstrap variable used throughout _main.scss as Bootstrap does not allow for this to be set.
$body-font-weight: 300;
// font weight for headings.
$headings-font-weight: 400;
// unit-less 'line-height' for use in components like buttons.
$line-height-base: 1.42857;
// background colour for '<body>'
$body-bg: #eee;
// global text colour on '<body>'
$text-color: #555;
// text colour for headings.
$headings-color: #444;
// global textual link colour.
$link-color: #6b020f;
// non-Bootstrap variable used to acentuate enboldened text within a , <dt> or <th>.
$bold-color: #222;
// Bootstrap base colour from which all greys are derived (normally black).
$gray-base: #000;
// non-Bootstrap variable used as a bridge between $gray-light and $gray-lighter.
$gray-mid: lighten($gray-base, 73.2%);
// non-Bootstrap variable used throughout _main.scss for h1, h2 and h3 margins.
$headings-123-margin-top: 20px;
$headings-123-margin-bottom: 8px;
// non-Bootstrap variable used to set the drop-shadow on panels and tab blocks etc.
$panel-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
$inset-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);

Headings

h1. Heading 1 - Small Heading 1

h2. Heading 2 - Small Heading 2

h3. Heading 3 - Small Heading 3

h4. Heading 4 - Small Heading 4

h5. Heading 5 - Small Heading 5

h6. Heading 6 - Small Heading 6

Text Styles

Text can be emboldened with  or  tags.

Text can be emphasized with  or  tags.

Text can be turned into a link with the <a> tag.

Text can be reduced in size with the  tag.

Text can be highlighted with the  tag.

~~Text can be struck-through~~ with <del> or <s> tags.

Text can be underlined with  or <ins> tags.

Inline code can be styled with the <code> tag.

Text can be styled as _subscript or ^superscript.

Text can be transformed to lowercase with the .text-lowercase class,

or transformed to uppercase with the .text-uppercase class,

or transformed to title case with the .text-capitalize class.

Text can be aligned left with the .text-left class.

Text can be aligned centre with the .text-center class.

Text can be aligned right with the .text-right class.

Abbreviations such as HTML can be explained with the <abbr> tag.

Abbreviations such as HTML can be reduced in size with the .initialism class.

Text colours on a white background

This text has been coloured blue using the .text-blue class.

This text has been coloured yellow using the .text-yellow class.

This text has been coloured red using the .text-red class.

This text has been coloured green using the .text-green class.

This text has been coloured orange using the .text-orange class.

This text has been coloured purple using the .text-purple class.

This text has been coloured gold using the .text-gold class.

This text has been coloured silver using the .text-silver class.

This text has been coloured bronze using the .text-bronze class.

This text has been coloured using the .text-brand1 class.

This text has been coloured using the .text-brand2 class.

This text has been coloured bright red using the .text-bright-red class.

This text has been coloured bright green using the .text-bright-green class.

Note: You must be aged sixteen or over to sign-up. .text-info

Success: Your message has been sent successfully. .text-success

Warning: Tax will be chargeable on your purchase. .text-warning

Error: Your request could not be processed. .text-danger

Text colours on a dark background