: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); } }

Margins

Knockout's margin suite mirrors the padding suite & is built to anticipate needs across viewports & to adjust accordingly. This means that, for instance, Margin Left - L may have 2 columns of left margin at desktop, & only a half column of margin at mobile. These behaviors can be adjusted on a per-project basis, but any adjustments should be made across all padding & margin classes in order to maintain consistency.

All classes convert to VW units above 1440px & to PX units at 1920px.

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.

Margin Top - Auto

This is some text inside of a div block.

Margin Top - XXL

This is some text inside of a div block.

Margin Top - XL

This is some text inside of a div block.

Margin Top - L

This is some text inside of a div block.

Margin Top - M

This is some text inside of a div block.

Margin Top - S

This is some text inside of a div block.

Margin Top - XS

This is some text inside of a div block.

Margin Top - XXS

This is some text inside of a div block.

Margin Top - 0

This is some text inside of a div block.

More classes available at tablet viewport

Margin Top Tab - Auto

This is some text inside of a div block.

Margin Top Tab - XXL

This is some text inside of a div block.

Margin Top Tab - XL

This is some text inside of a div block.

Margin Top Tab - L

This is some text inside of a div block.

Margin Top Tab - M

This is some text inside of a div block.

Margin Top Tab - S

This is some text inside of a div block.

Margin Top Tab - XS

This is some text inside of a div block.

Margin Top Tab - XXS

This is some text inside of a div block.

Margin Top Tab - 0

This is some text inside of a div block.

More classes available at mobile viewport

Margin Top Mob - Auto

This is some text inside of a div block.

Margin Top Mob - XXL

This is some text inside of a div block.

Margin Top Mob - XL

This is some text inside of a div block.

Margin Top Mob - L

This is some text inside of a div block.

Margin Top Mob - M

This is some text inside of a div block.

Margin Top Mob - S

This is some text inside of a div block.

Margin Top Mob - XS

This is some text inside of a div block.

Margin Top Mob - XXS

This is some text inside of a div block.

Margin Top Mob - 0

This is some text inside of a div block.

Margin Right - Auto

This is some text inside of a div block.

Margin Right - XXL

This is some text inside of a div block.

Margin Right - XL

This is some text inside of a div block.

Margin Right - L

This is some text inside of a div block.

Margin Right - M

This is some text inside of a div block.

Margin Right - S

This is some text inside of a div block.

Margin Right - XS

This is some text inside of a div block.

Margin Right - XXS

This is some text inside of a div block.

Margin Right - 0

This is some text inside of a div block.

More classes available at tablet viewport

Margin Right Tab - Auto

This is some text inside of a div block.

Margin Right Tab - XXL

This is some text inside of a div block.

Margin Right Tab - XL

This is some text inside of a div block.

Margin Right Tab - L

This is some text inside of a div block.

Margin Right Tab - M

This is some text inside of a div block.

Margin Right Tab - S

This is some text inside of a div block.

Margin Right Tab - XS

This is some text inside of a div block.

Margin Right Tab - XXS

This is some text inside of a div block.

Margin Right Tab - 0

This is some text inside of a div block.

More classes available at mobile viewport

Margin Right Mob - Auto

This is some text inside of a div block.

Margin Right Mob - XXL

This is some text inside of a div block.

Margin Right Mob - XL

This is some text inside of a div block.

Margin Right Mob - L

This is some text inside of a div block.

Margin Right Mob - M

This is some text inside of a div block.

Margin Right Mob - S

This is some text inside of a div block.

Margin Right Mob - XS

This is some text inside of a div block.

Margin Right Mob - XXS

This is some text inside of a div block.

Margin Right Mob - 0

This is some text inside of a div block.

Margin Bottom - Auto

This is some text inside of a div block.

Margin Bottom - XXL

This is some text inside of a div block.

Margin Bottom - XL

This is some text inside of a div block.

Margin Bottom - L

This is some text inside of a div block.

Margin Bottom - M

This is some text inside of a div block.

Margin Bottom - S

This is some text inside of a div block.

Margin Bottom - XS

This is some text inside of a div block.

Margin Bottom - XXS

This is some text inside of a div block.

Margin Bottom - 0

This is some text inside of a div block.

More classes available at tablet viewport

Margin Bottom Tab - Auto

This is some text inside of a div block.

Margin Bottom Tab - XXL

This is some text inside of a div block.

Margin Bottom Tab - XL

This is some text inside of a div block.

Margin Bottom Tab - L

This is some text inside of a div block.

Margin Bottom Tab - M

This is some text inside of a div block.

Margin Bottom Tab - S

This is some text inside of a div block.

Margin Bottom Tab - XS

This is some text inside of a div block.

Margin Bottom Tab - XXS

This is some text inside of a div block.

Margin Bottom Tab - 0

This is some text inside of a div block.

More classes available at mobile viewport

Margin Bottom Mob - Auto

This is some text inside of a div block.

Margin Bottom Mob - XXL

This is some text inside of a div block.

Margin Bottom Mob - XL

This is some text inside of a div block.

Margin Bottom Mob - L

This is some text inside of a div block.

Margin Bottom Mob - M

This is some text inside of a div block.

Margin Bottom Mob - S

This is some text inside of a div block.

Margin Bottom Mob - XS

This is some text inside of a div block.

Margin Bottom Mob - XXS

This is some text inside of a div block.

Margin Bottom Mob - 0

This is some text inside of a div block.

Margin Left - Auto

This is some text inside of a div block.

Margin Left - XXL

This is some text inside of a div block.

Margin Left - XL

This is some text inside of a div block.

Margin Left - L

This is some text inside of a div block.

Margin Left - M

This is some text inside of a div block.

Margin Left - S

This is some text inside of a div block.

Margin Left - XS

This is some text inside of a div block.

Margin Left - XXS

This is some text inside of a div block.

Margin Left - 0

This is some text inside of a div block.

More classes available at tablet viewport

Margin Left Tab - Auto

This is some text inside of a div block.

Margin Left Tab - XXL

This is some text inside of a div block.

Margin Left Tab - XL

This is some text inside of a div block.

Margin Left Tab - L

This is some text inside of a div block.

Margin Left Tab - M

This is some text inside of a div block.

Margin Left Tab - S

This is some text inside of a div block.

Margin Left Tab - XS

This is some text inside of a div block.

Margin Left Tab - XXS

This is some text inside of a div block.

Margin Left Tab - 0

This is some text inside of a div block.

More classes available at mobile viewport

Margin Left Mob - Auto

This is some text inside of a div block.

Margin Left Mob - XXL

This is some text inside of a div block.

Margin Left Mob - XL

This is some text inside of a div block.

Margin Left Mob - L

This is some text inside of a div block.

Margin Left Mob - M

This is some text inside of a div block.

Margin Left Mob - S

This is some text inside of a div block.

Margin Left Mob - XS

This is some text inside of a div block.

Margin Left Mob - XXS

This is some text inside of a div block.

Margin Left Mob - 0

This is some text inside of a div block.

Margin Top - 15

This is some text inside of a div block.

Margin Top - 10

This is some text inside of a div block.

Margin Top - 5

This is some text inside of a div block.

Margin Right - 15

This is some text inside of a div block.

Margin Right - 10

This is some text inside of a div block.

Margin Right - 5

This is some text inside of a div block.

Margin Bottom - 15

This is some text inside of a div block.

Margin Bottom - 10

This is some text inside of a div block.

Margin Bottom - 5

This is some text inside of a div block.

Margin Left - 15

This is some text inside of a div block.

Margin Left - 10

This is some text inside of a div block.

Margin Left - 5

This is some text inside of a div block.

More classes available at tablet viewport

Margin Top Tab - 15

This is some text inside of a div block.

Margin Top Tab - 10

This is some text inside of a div block.

Margin Top Tab - 5

This is some text inside of a div block.

Margin Right Tab - 15

This is some text inside of a div block.

Margin Right Tab - 10

This is some text inside of a div block.

Margin Right Tab - 5

This is some text inside of a div block.

Margin Bottom Tab - 15

This is some text inside of a div block.

Margin Bottom Tab - 10

This is some text inside of a div block.

Margin Bottom Tab - 5

This is some text inside of a div block.

Margin Left Tab - 15

This is some text inside of a div block.

Margin Left Tab - 10

This is some text inside of a div block.

Margin Left Tab - 5

This is some text inside of a div block.

More classes available at mobile viewport

Margin Top Mob - 15

This is some text inside of a div block.

Margin Top Mob - 10

This is some text inside of a div block.

Margin Top Mob - 5

This is some text inside of a div block.

Margin Right Mob - 15

This is some text inside of a div block.

Margin Right Mob - 10

This is some text inside of a div block.

Margin Right Mob - 5

This is some text inside of a div block.

Margin Bottom Mob - 15

This is some text inside of a div block.

Margin Bottom Mob - 10

This is some text inside of a div block.

Margin Bottom Mob - 5

This is some text inside of a div block.

Margin Left Mob - 15

This is some text inside of a div block.

Margin Left Mob - 10

This is some text inside of a div block.

Margin Left Mob - 5

This is some text inside of a div block.