This system allows pages to be built quickly, optimized across viewports, & easily maintained with only the information contained on this page.
Section
Section applies the page gutters & max-width to content. And content you'd like to stretch outside the max-width should be placed outside of the section.
This class combination removes overflow: hidden;, allowing position: sticky; to be used inside a section. It also applies overflow: visible;, allowing content to escape the Section.
Column wrapper
This element groups columns.
Viewport width columns
Viewport width columns are ideal for creating layouts. Single columns can also be centered with Margin X - Auto or aligned with Margin Left - Auto or Margin Right - Auto since Column Wrapper applies display: flex;.
Percentage columns
Percentage columns are ideal for repeated content.
The Half column stacks at mobile viewport by default. To overwrite this behavior, append the class Half Mob.
Margin offsets
Offset subclasses should be applied to the Column Wrapper & should match the padding applied to the columns.
Display
Flex display classes can be combined, both across viewports & within the same viewport. But other display classes will conflict with a flex class, applying block, inline-block, or inline. To control display on a flex component, apply a class like Desktop Only to its parent element. Flex align & justify classes adjust direction based on the flex direction set, horizontal or vertical.
Tip: If you want a sentence to wrap into two equal lines, rather than word-by-word, place the second half of the sentence in anInline-Block span.