Items

Items are the building block of the site. Wherever you need a picture and related copy use an item

Modifyer classes

• o-item__image--100vw
• o-item__image--fitscreen
• o-item__content--overlay
• o-item__content--overlayMiddle
• o-item__content--overlayStretched

Buttons

Buttons use the class o-btn

Underlined links use the class o-link

For 2 or more grouped buttons, wrap buttons in element with class of o-buttons

Modifyer classes

• o-btn--sm
• o-btn--md
• o-btn--lg
• o-btn--plain
• o-btn--basic
• o-btn--primary

Containers

Use the class container for general puporse containers. It defines gutters and max-width for all screen sizes

For a container with the maximum site width but no gutters use the class u-site-max-width in combination with u-mx-auto for centering.

Related classes

• container-md
• container-lg
• u-max-width-1 REM based equivalent to three wide column
• u-max-width-2 REM based equivalent to four wide column
• u-max-width-3 REM based equivalent to eight wide column
• u-max-width-4 REM based equivalent to ten wide column
• u-max-width-5 REM based equivalent to eleven wide column

Sections

When defining blocks of content use a section element with a class of o-section

This adds vertical padding and adjacent sections apply a divider by default

Related classes

• o-section--divider
• o-section--divider-none
• o-section--divider-none-top
• o-section--divider-none-bottom
• o-section--divider-sm
• o-section--divider-top-sm
• o-section--divider-bottom-sm
• o-section--divider--max-width-1
• o-section--divider--max-width-2
• o-section--divider--max-width-3
• o-section--divider--max-width-4

Grid

A grid layout can be defined with a grid wrapper element

Columns are direct children of the grid element and defined with a column class

Columns widths can be defined on the column element by using the following convention [number] wide class

Related grid element classes

• relaxed
• very relaxed
• stackable
• padded
• gutterless
• equal width
• [number] wide
• horizontally padded
• vertically padded
• left floated
• right floated
• top aligned
• middle aligned
• bottom aligned
• left aligned
• right aligned
• center aligned
• justified
• centered

Nested grids

Clearing content

Row wrappers will automatically clear previous columns, making them useful when using floated variations.

Reponsive Grid

Columns (and rows) can have their width defined at multiple breakpoints. Use the convention [number] wide [screen]

Equal Width Grid

Make all columns equal width equal width

Stackable Grid

Make columns stack on mobile (below 768px). Use stackable

Gutterless Grid

Use gutterless

Relaxed Grid

Use relaxed

Very Relaxed Grid

Use very relaxed

Menu

Please note: There are some existing | transitional CSS conflict issues with the menu that won't exist on new CSS.

Default menu (including header)

Equal width menu

This example below also includes underline on hover style and a submenu.

Vertical menu

This example below also includes underline on hover style and a submenu.

Stackable menu

Stacks to select-style menu on mobile

Behaivioral requirements not yet done

Ultility classes

There are many useful ultility classes which you can use to build layouts and style content

Please refer to less files within less/utility for a reference

Layout

• u-max-width-[1-5]
• u-max-site-width
• u-[direction]-0
• u-[direction]-auto

See /less/utility/layout.less for more

Flex

• u-flex
• u-inline-flex
• u-flex-column
• u-flex-column-reverse
• u-items-start
• u-items-end

See /less/utility/flex.less for more