Colors

Greyscale

Brand Colors

Typography

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

RTE headings

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

• Strong
• Emphasis
• Inline link
• Strike
• ^Sup

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

Grid

Please see the official Bootstrap grid documentation for a complete introduction to the grid system

Containers

This site requires a containing element to wrap site contents and house our grid system. You may choose one of two containers. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

  <div class="container">
  ...
  </div>
    

Use .container-fluid for a full width container, spanning the entire width of your viewport.

  <div class="container-fluid">
  ...
  </div>
    

Media Queries

We use the following media queries in our SCSS files to create the key breakpoints in our grid system.

  /* Extra small devices (phones, less than 768px) */
  /* No media query since this is the default */

  /* Small devices (tablets, 768px and up) */
  @media (min-width: $screen-sm-min) { ... }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: $screen-md-min) { ... }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: $screen-lg-min) { ... }

  /* Extra Large devices (Wide screens, 1400px and up) */
  @media (min-width: $screen-xl-min) { ... }
    

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

  @media (max-width: $screen-xs-max) { ... }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) { ... }
    

Grid Options

Responsive tables

Forms

Vertical forms (customer, contact, etc)

    {% if form.posted_successfully? %}
      <p class="alert alert-success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
      <div class="alert alert-danger">
        {{ form.errors | default_errors }}
      </div>
    {% endif %}