:root { --body-vw: 18vw; --body-px: 18px; --text-l-vw: 20vw; --text-l-px: 20px; --text-m-vw: 16vw; --text-m-px: 16px; --text-s-vw: 14vw; --text-s-px: 14px; --xxl-vw: 64vw; --xxl-px: 64px; --xl-vw: 56vw; --xl-px: 56px; --l-vw: 42vw; --l-px: 42px; --m-vw: 36vw; --m-px: 36px; --s-vw: 24vw; --s-px: 24px; --xs-vw: 20vw; --xs-px: 20px; } @media only screen and (min-width: 1440px) { body { font-size: calc((var(--body-vw)) / 1440 * 100); } .text-l { font-size: calc((var(--text-l-vw)) / 1440 * 100); } .text-m { font-size: calc((var(--text-m-vw)) / 1440 * 100); } .text-s { font-size: calc((var(--text-s-vw)) / 1440 * 100); } h1, .headline.xxl { font-size: calc((var(--xxl-vw)) / 1440 * 100); } h2, .headline.xl { font-size: calc((var(--xl-vw)) / 1440 * 100); } h3, .headline.l { font-size: calc((var(--l-vw)) / 1440 * 100); } h4, .headline.m { font-size: calc((var(--m-vw)) / 1440 * 100); } h5, .headline.s { font-size: calc((var(--s-vw)) / 1440 * 100); } h6, .headline.xs { font-size: calc((var(--xs-vw)) / 1440 * 100); } } @media only screen and (min-width: 1920px) { body { font-size: calc((var(--body-px)) * 1.3333); } .text-l { font-size: calc((var(--text-l-px)) * 1.3333); } .text-m { font-size: calc((var(--text-m-px)) * 1.3333); } .text-s { font-size: calc((var(--text-s-px)) * 1.3333); } h1, .headline.xxl { font-size: calc((var(--xxl-px)) * 1.3333); } h2, .headline.xl { font-size: calc((var(--xl-px)) * 1.3333); } h3, .headline.l { font-size: calc((var(--l-px)) * 1.3333); } h4, .headline.m { font-size: calc((var(--m-px)) * 1.3333); } h5, .headline.s { font-size: calc((var(--s-px)) * 1.3333); } h6, .headline.xs { font-size: calc((var(--xs-px)) * 1.3333); } }

Columns

Knockout is based on a 14-column, fully responsive grid. This allows for a column of responsive gutter on each side and a 12-column grid for content within. The reason we use responsive gutters instead of fixed gutters is so that we can viewport units to define responsive margin, padding, and columns that stay on grid, while avoiding the complications of nested percentage units. These units convert to pixels at 1920 and stop expanding.

We have two column suites: viewport-based for modular layouts & percentage-based for repeating elements; & also an offset suite that corrects for gutters in layouts with repeating elements.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Viewport-based columns

The viewport-based column suite is best for defining layouts that shouldn't adjust relative to their parent, but instead to the size of the viewport. The benefit of this approach is that your columns will always land on grid. So these classes are ideal for any unique layouts.

Tip: A combination like Column 6 Col Center Element will use auto margins to center the div, creating the illusion of left/right padding.

Tip: Because the browser scrollbar can cause 20px of horizontal scroll when using 100vw in some browsers, it's important to use Auto Col, Auto Col Tab, or Auto Col Mob for the last column when using the VW set.

Column
Auto Col
Column
1 Col
Column
2 Col
Column
3 Col
Column
4 Col
Column
5 Col
Column
6 Col
Column
7 Col
Column
8 Col
Column
9 Col
Column
10 Col
Column
11 Col
Column
12 Col
Column
13 Col
Column
14 Col
Tablet viewport icon.
More classes available at tablet viewport
Column
Auto Col Tab
Column
1 Col Tab
Column
2 Col Tab
Column
3 Col Tab
Column
4 Col Tab
Column
5 Col Tab
Column
6 Col Tab
Column
7 Col Tab
Column
8 Col Tab
Column
9 Col Tab
Column
10 Col Tab
Column
11 Col Tab
Column
12 Col Tab
Column
13 Col Tab
Column
14 Col Tab
Mobile viewport icon.
More classes available at mobile viewport
Column
1 Col Mob
Column
2 Col Mob
Column
3 Col Mob
Column
4 Col Mob
Column
5 Col Mob
Column
6 Col Mob
Column
7 Col Mob
Column
8 Col Mob
Column
9 Col Mob
Column
10 Col Mob
Column
11 Col Mob
Column
12 Col Mob
Column
13 Col Mob
Column
14 Col Mob

Percentage-based columns

The percentage-based column suite is best for sizing repeating elements, & are sized relative to their parent. For instance, a 3up card-based layout might need to nest inside 14 columns, 12 columns, or even 10 columns depending on the padding of its parent, so these columns will flexibly adjust. Consequently, these columns may not always subdivide on grid, but that's generally fine for these use cases.

Tip: The padding offset suite (below) allows percentage-based columns with gutters to land on grid by offsetting the inner padding with negative margin.

Column
Width 20
Column
Width 25
Column
Width 33
Column
Width 40
Column
Width 50
Column
Width 60
Column
Width 70
Column
Width 80
Column
Width 100
Tablet viewport icon.
More classes available at tablet viewport
Column
Fifth Tab
Column
Fourth Tab
Column
Third Tab
Column
Half Tab
Column
Whole Tab
Mobile viewport icon.
More classes available at mobile viewport
Column
Fifth Mob
Column
Fourth Mob
Column
Third Mob
Column
Half Mob
Column
Whole Mob

Margin offsets

Margin offsets are used to align repeating elements with gutters to the outer grids by offsetting the padding with negative margins. For instance, suppose you want a 3up card layout with a 1 column of gutter in between the cards. You would accomplish this with a half-column of left- and right-padding within each card, but that would also inset your first & last card by a half column. So you would apply a half column negative margin to the parent in order to offset the padding.

Margin Offset - L
This is some text inside of a div block.
Margin Offset - M
This is some text inside of a div block.
Margin Offset - S
This is some text inside of a div block.
Margin Offset - XS
This is some text inside of a div block.
Margin Offset - XXS
This is some text inside of a div block.

The grid

There are two visual grids that can be toggled off & on as background images at the Body (All Pages) level: one for dark backgrounds & the other for light. These grids stop expanding at 1920, just like the grid suites, & will allow you to check alignment. The grid can also be applied to Sections with the Grid - Light Grid - Dark.

Grid - Light
Grid - Dark