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.
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
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.
ExampleGrid 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
.grid.grid--justify-center
.grid.grid--justify-end
Grid Vertical Alignments
.grid.grid--top
.grid.grid--center
.grid.grid--bottom
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
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
ExampleTent Name | Tent Type | Sleeps |
---|---|---|
Camel 575S | Dome | 6 |
Mule 40T | Dome | 6 |
Sequoia LT | Ridge | 2 |
Stripped Table
ExampleTent Name | Tent Type | Sleeps |
---|---|---|
Camel 575S | Dome | 6 |
Mule 40T | Dome | 6 |
Sequoia LT | Ridge | 2 |