Page Structure

Structure refers to the padding, margin, column & grid systems that arrange content on the page. This page is a quick reference for those systems

Padding

The padding system is built on a number of proportional padding widths & a few "Stackable" modifiers that allow for flush stacking.

Padding - Extra Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Extra Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Medium Stackable - Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Medium Stackable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Padding - Medium Stackable - Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Vertical Spacing

The vertical spacing system is based on a series of proportional bottom margins.

Spacing - Extra Large

This is some text inside of a div block.
This is some text inside of a div block.

Spacing - Large

This is some text inside of a div block.
This is some text inside of a div block.

Spacing - Medium

This is some text inside of a div block.
This is some text inside of a div block.

Spacing - Small

This is some text inside of a div block.
This is some text inside of a div block.

Spacing - Extra Small

This is some text inside of a div block.
This is some text inside of a div block.

Spacing - Extra Extra Small

This is some text inside of a div block.
This is some text inside of a div block.

Columns

Columns use a Columns & a Column class to allow for a custom gutter. These can be expanded on to allow for multiple gutters (Columns - Wide, Column - Wide, etc).

This is some text inside of a div block.
This is some text inside of a div block.

CSS Grid

CSS Grid is an easier method of arranging content that doesn't require as many classes. Gutters can be defined on a case-by-case basis.

This is some text inside of a div block.
This is some text inside of a div block.