Introduction

Why use Bootstrap 4?

Bootstrap 4 is a open source HTML and CSS framework. By customising Bootstrap's components we can create our own front end theme, documenting our markup practices and creating working web patterns along the way.

Fonts and Fallbacks

The Croydon Council brand font Fiendstar Bold is used for display headlines and a handful of other elements, creating a unique identity:

Defining fallbacks

Fiendstar Bold and fallbacks

font-family: "Fiendstar W01 Bold", 'Source Sans Pro', Arial, Helvetica, sans-serif;
font-weight: bold; /* For fallbacks only */

Source Sans Pro and fallbacks

font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
font-weight: 300; /* 400, 700, or 900* /

Use only once per page inside <main> > <header>

Page content sections

Where pages require multiple sections, content should be grouped in <section> tags. Sections have custom styles applied in the theme to visually break up the layout, as well as carrying their HTML5 semantic meaning.

Each content section typically starts with a <h2> heading and can contain nested sections to group sub content:

Headings

Sizing and usage for <h1> to <h6> heading tags:

Page title <h1>

Use only once per page in the <main> > <header>

Section heading <h2>

Use for clearly defined sections inside <main> and for headings in the sidebar

Sub section heading <h3>

Use for sub sections of <h2>

Sub section heading <h4>

Use for sub sections of<h3>

Sub section heading <h5>

Use for sub sections of <h4>

Sub section heading <h6>

Use for sub sections of <h5>

Sidebar text sizing

Headings, paragraphs and lists placed inside the .sidebar container have been themed to display at a reduced size compared to their equivalent inside the main content area.

This excludes h1 which should only feature once in the page master headlines area.

List types

Use the standard HTML <ul> and <ol> tags to create lists. Custom icon lists require some additional styling acheived by adding the class . iconlist to your ul .

Unordered lists

• Bullet list item
• Bullet list item
• Bullet list item

Ordered lists

1. Numbered list item
2. Numbered list item
3. Numbered list item

Custom icon lists

• Checklist required or included
• Checklist required or included
• This longer list item with a word count of 20 has been included to demonstrate icon alignment with multiline text

Form input heights

Use Bootstrap 4 'form control' classes in your HTML to choose an input height:

Form input widths

Use Bootstrap 4 'column classes' in your HTML to choose an input width:

Form best practice

Example form elements:

Form validation

Meeting field requirements:

The default Bootstrap 4 field validation icons have been replaced with Open Iconinc svg background images.

Alerts

Alert the user to information, a warning or an action they need to take:

Icons are defined in the alert markup using content icons.

Button colours

Use Bootstrap 4 'button classes' in your HTML to choose a colour theme.

Button using .btn and .btn-primary classes:

Use by default

Button using .btn and .btn-carbon classes:

Create contrast with main button or overlay on purple

Make a button inactive by adding a disabled attribute to the <button> input:

Uses 60% opacity

Make use of our custom SASS colour variables by adding them to the button class. In this example replacing .btn-primary with .btn-indigo :

Only use colours from the theme that have been colour contrast tested with white text

Use the .btn and .btn-link classes to create inline, link style buttons:

Read more about button theming with Bootstrap 4 buttons.

Buttons height and font size

Use Bootstrap 4 'button classes' in your HTML to choose a button height and font size.

Standard size button using .btn and .btn-primary classes:

Use by default (height = 50px)

Large size button using .btn , .btn-primary and .btn-lg classes:

Draw attention to key functionality (height = 60px)

Small size button using .btn , .btn-primary and .btn-sm classes:

Use where space is limited or when another button requires priority focus (height = 40px)

Inputs and buttons share the same sizing. Read more about input sizing with Bootstrap 4 form control.

Button widths

Buttons will expand to accomodate their content, but in order to align buttons to other elements we must use Bootstrap 4 button or column classes.

Button with no width defined:

Expands to accomodate text

Button using the .col-12 class:

100% with of container at all breakpoints

Button using .col-sm-8 class:

100% width button, then 8 of 12 columns above the sm breakpoint (576px+)

Button using .col-sm-5 class:

100% width button, then 5 of 12 columns above the sm breakpoint (576px+)

Button using .col-6 and .col-md-4 classes:

50% width button, then 33.3% above the md breakpoint

Read more about using the Bootstrap 4 layout grid.

Inline text styles

For extra text syling make use of these HTML5 elements:

Use the <mark> tag to highlight text in your pages - It's used throught these guidlines to highlight tags and classes .

Use the <small> tag to add footnotes:
Caption or footnote wrapped in a small tag with a hyperlink

Use the <em> tag to emphasise text:
Example sentence with emphasised text

Read more about text styling with Bootstrap 4 inline elements.

Colours

All theme colours have been tested for colour contrast WCAG level AA. Both as coloured text on a white background and as a background with the default 'Carbon' or white text overlayed.

Default theme colours

Custom colours mapped to 'theme colours'

Icons

Open Iconinc Icons have been chosen for their simple flat style, bold weight, and availability of desired icons.

Icon examples

Example icon markup

<span class="oi oi-check" title="Checklist"></span>

Brand icons

As brand icons are not featured in Open Iconinc a custom font has been generated using Fontello creating a lightweight @font-face embed, just for brand icons.

Brand icons examples

Accordion menu - Vanilla Javascript

For multi category navigation consider an accordion style menu in the sidebar.

You must ensure the <div> that wraps the navigation uses a class of .sidebar

Simple menu

For multi category navigation consider the simple menu in the sidebar.

You must ensure the <div> that wraps the navigation uses a class of .sidebar

Callout boxes

Focus attention on key information by using a callout box. Typically used a maximum of once per page.

Spacing - padding and margin

Use the Bootstrap 4 spacing classes in your HTML code to add styling to your elements.