Note: Any table elements that come out of the rich text editor are will automatically have a responsive wrapper applied to them. This allows them to scroll on small screens without breaking the site layout.

Grid System

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Extra Large devices Desktops (≥1480px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Container width

None (auto)

750px

970px

1170px

1440px

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

.col-xl-

# of columns

12

Gutter width

40px (20px on each side of a column)

Nestable

Yes

Offsets

Yes

Column ordering

Yes

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

Content Grid

This is a more rigid grid for laying out content, typically products and articles. It uses the same sizing and gutters as the normal grid. There is one base version with several modifier classes that allow you some level of flexibility. The default layout is 1 across on mobile devices, and 3-col on screens larger than $screen-md-min.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

Alternate Content Grid Layouts

Modifier classes are available to create 2-col and 4-col layouts on screens larger than $screen-md-min.

2 Across

Grid item 1

Grid item 2

Grid item 3

Grid item 4

4 Across

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

Grid item 7

Grid item 8

Flush Content Grid

Use the content-grid--flush modifier class to make all grid items horizontally flush. This parent class is also used as a modifier for child elements that may show up in the grid, particularly the article card and content card.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

Combine with frames to make tiled layouts.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

You can also use the grid item modifier classes to create grid items that span multiple columns.

Here we're using a 4 column content grid with 2 modified grid items.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

Tables

Responsive Tables

Wrap tables with a .table-responsive element to enable horizontal scrolling on small screens

Forms

Default Forms

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

First Name

Last Name

Email

Horizontal forms (customer, contact, etc)

Text Field

Placeholder

Disabled Field

Text Field (Error)

Select Field

Text Area

Inline Forms

Name

Email

Other Form Elements

Checkbox Field

Checkbox Field

Disabled Checkbox Field

Option 1

Option 2

Option 3

Textarea

File Field

Example block-level help text here.

Thick Bordered Elements

Add the form-control--thick modifier class to add a thick border to any form control elements.

Text Field

Select Field

Note About Select Elements

This theme is using the Chosen library to enhance native select tags. By default, any select.form-control elements are targeted and initialized on page load. If you want to avoid this, add the data-no-chosen attribute to your select tag and it will be left alone.

Page Elements

Page Header

Use this element at the top of pages to add consistent titles + subtitles. You can also use this element without the subtitle if necessary. This element also works with left and right modifier classes to change text alignment.

Frames

Use frames to create elements with defined aspect ratios. All frames require the .frame base class and a modifier class to define their aspect ratio. There is also a child element .frame__inner that is positioned absolutely and stretches the full dimensions of the frame.

16x9

6x4

4x3

1x1

3x4

4x6

9x16

Responsive Frames

There are responsive modifier classes for all frame sizes and all breakpoints.

Panels

Panels are generic containers for content that have a header and a body. They don't get used very much, but the base .panel element is needed for the collapse / accordion plugin to work so we've included it here. The base element should remain unstyled. All the styling you see below is set on the child .panel__* classes.

CTA 3

CTA 4

CTA Grouping

UI Elements

Arrows

Arrow elements are mostly used for slideshow controls. The root element has the base arrow class applied to it and directional modifier classes are available. By default, it has one child element that makes up the actual arrow icon.

This child element easily be swapped out for a png, svg, or other icon made of pseudo elements.

Breadcrumbs

Social Sharing

Minimal Input

Quantity Adjuster

The quantity adjuster automatically comes with javascript functionality that provides input validation and UI constraints around max / min attributes set on the input element.

Dots

Dots are an alternate UI used primarily for displaying / selecting variant option values. They respond to the two state classes .is-active and .is-disabled. Active dots will show a border around them, disabled dots will show with partial opacity and a strike through.

S

M

L

XL

OS

Apply a background color or background image to the .dot__inner element to use them as swatches.

Or apply a modifier class to apply a background color as defined in the swatch palette. The list of available color-modifier classes is below.