Knockout is based on a 14-column responsive grid. This allows for a column of responsive gutter on each side, & 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, & columns that stay on grid, while avoiding the complications of nested percentage units. These units convert to pixels at 1920 & 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.
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.
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.
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.
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.
The padding suite is built to anticipate needs across viewports & to adjust accordingly, so applying a viewport-specific modifier class should only be necessary when the intended behavior is exceptional. This means that, for instance, Padding - L may have 2 columns of left/right padding at desktop, & only a half column of padding 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.
Lorem ipsum
These padding classes can be used on their own or to override the all-sides padding classes.
The 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.
The flex suite is primarily used for positioning content.
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.
Headline sizes correspond to but are independent of H1-H6 sizes, & can be overridden at tablet & mobile breakpoints. Font sizes convert to VW units above 1440px & back to pixel units at 1920px.
Tip: Type sizes for larger viewports are calculated in the Large Viewport Type embed within the Custom Code symbol. Apply the Desktop sizes to the embedded variables & the custom CSS will make the calculations for you.
Tip: Paragraph word-spacing is set in the Custom Code.
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.
Block Quote
Lorem ipsum dolor sit amet, consectetur1
Lorem ipsum dolor sit amet, consectetur1
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Knockout uses the Font Awesome 5 Pro icon system, implemented as a font. This means that any unicode glyph from the font can be pasted as text, provided it's given a class corresponding to its set. Light, Solid, & Brands sets are supported. These classes can be combined with other classes for additional styling.
Icons can also be added as pseudo-elements in custom code using unicode or the unicode glyph.
The icon cheat sheet can be found here.
The color suite is based around a 4 color system, but can accommodate bonus colors at the end of the palette. The Hi & Lo variations are used in hover & pressed states on links & buttons. Class names are not intended to be changed. Customization of colors should be done by editing the color palette, rather than the classes, to avoid breaking how the colors are mapped to elements.
Images are defined by the aspect ratio of their parent div, which can be adjusted across aspect ratios. Image elements use the Object Fit Cover class, while their parents use the Image class & a subclass that defines the aspect ratio like 16x5.
Tip: Image aspect ratios can be overridden at each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.
Modifier classes can be used to change things like display properties, corner radii, or positioning of an element.
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.
