Objects

These are class-based selectors that define undecorated design patterns. They are vital for layout and structure.

Zones

These are opinionated sections that help define unique areas of your webpage such as the master header, content, and footer.

Due to the naming of these areas being so opinionated we have built in Sass variables for these to be modified if you so choose.

Containers

These are large class selectors that can hold many other structures and components. Consider containers the "wrappers" that make your content properly fit the window's width. They will auto-set margins on all screen sizes.

.container

A full-width container:

.container.container--fluid

Flex Object

The foundation for a modern extensible framework. The Flex Object is a flexbox based object we use to build other objects and components. Many principles of this object will be shared and seem familar with others.

Grid

Extends the Flex Object

The grid is a flexbox-based mobile-first responsive layout object. That is a mouthful in itself! With the addition of flexbox, the grid is a super-powerful system to help lay out your content.

Example
Auto
Auto
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
8
1
1
1
1

Grid Column Breakpoints

The grid column breakpoint classes are designed to be mobile-first. So .grid__column--# will be visible on the smallest viewports while .grid__column--#--md would take effect on medium viewsports. So the class .grid__column--# will always be visible until the next column class with a breakpoint modifier is used.

Grid Horizontal Alignments

.grid.grid--justify-start

Example
4
2

.grid.grid--justify-center

Example
4
2

.grid.grid--justify-end

Example
4
2

Grid Vertical Alignments

.grid.grid--top

Example
Auto
Auto

.grid.grid--center

Example
Auto
Auto

.grid.grid--bottom

Example
Auto
Auto

Individual columns within a grid can also have their own alignment:

.grid__column.grid__column--top
.grid__column.grid__column--center
.grid__column.grid__column--bottom
Example
One of Three Columns
One of Three Columns
One of Three Columns

Object Lists

These are plain undesigned lists that can be helpful to assemble common component types such as menus and navigation bars.

Unstyled List

Example
  • List Item 1
  • List Item 2
  • List Item 3

Nulled List

This list modifier nullifies the default margins set on list items. Since content elements should be able to be classless, it makes sense to require a class for objects and components instead.

Example
  • List Item 1
  • List Item 2
  • List Item 3

Inline List

Example
  • List Item 1
  • List Item 2
  • List Item 3

Tables

Example
Tent Name Tent Type Sleeps
Camel 575S Dome 6
Mule 40T Dome 6
Sequoia LT Ridge 2

Stripped Table

Example
Tent Name Tent Type Sleeps
Camel 575S Dome 6
Mule 40T Dome 6
Sequoia LT Ridge 2