CSS Class
Appendix

01 TYPOGRAPHY

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.

.caps

Capitalizes Text and applies ALL CAPS SPACING variable

.txt-CENTER

Applys Center Justify to text

.txt-LEFT

Applys Left Justify to text

Variables
Paragraph Line Limit

Limits the amount of characters in a Paragraph line. This is default set to 85CH and is designed to limit eye strain and increase readability.

02 COLUMNS

The frame work is based off a 9 column grid. Why 9 columns? Easy Math (and no repeating decimals). The margins are calculated at ½ the column width + ½; both equal 1 column and a gutter. Columns + Margins divides the page by 10. Use of any primary column classes should be a child of a .flex but the grid can still be achieved PUSH classes.

Columns width are calculated using:
((100-(Margin Left + Margin Right)) / amount of columns) - gutter width

.1-col

when a child of .flex.gutter this div will span the width of 1 column + Gutter. Default is set to 9vw.

.2-col

when a child of .flex.gutter this div will span the width of 2 column + Gutter. Default is set to 19vw.

.3-col

when a child of .flex.gutter this div will span the width of 3 column + Gutter. Default is set to 29vw.

.4-col

when a child of .flex.gutter this div will span the width of 4 column + Gutter. Default is set to 39vw.

.5-col

when a child of .flex.gutter this div will span the width of 5 column + Gutter. Default is set to 49vw.

.6-col

when a child of .flex.gutter this div will span the width of 6 column + Gutter. Default is set to 59vw.

.7-col

when a child of .flex.gutter this div will span the width of 7 column + Gutter. Default is set to 69vw.

.8-col

when a child of .flex.gutter this div will span the width of 8 column + Gutter. Default is set to 79vw.

.9-col

when a child of .flex.gutter this div will span the width of the grid. Default is set to 90vw.
‍
*This is the full width of the grid and therefor doesn't need a gutter subtracted from the width.

.half-col

when a child of .flex.gutter this div will span the 50% width of the grid. While this technically breaks the grid, it still is a logical division.

COLUMN PUSH
.1-col-PUSH

when a child of .flex this div will span the width of 1 column + Gutter + Margin. Default is set to 9vw.

1/2 column width + 1/2 gutter width