Styleguide setup

Before starting a Knockout project, we must configure its style guide. In this way we will not have to apply the styles to the elements over and over again, but we will have everything defined before starting with that project.

Text

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.

Headline
XXL

Heading

Headline
XL

Heading

Headline
L

Heading

Headline
M

Heading

Headline
S
Heading
Headline
XS
Heading
Tablet viewport icon.
More classes available at tablet viewport
Headline
XXL Tab

Heading

Headline
XL Tab

Heading

Headline
L Tab

Heading

Headline
M Tab

Heading

Headline
S Tab

Heading

Headline
XS Tab

Heading

Mobile viewport icon.
More classes available at mobile viewport
Headline
XXL Mob

Heading

Headline
XL Mob

Heading

Headline
L Mob

Heading

Headline
M Mob

Heading

Headline
S Mob

Heading

Headline
XS Mob

Heading

Text L
This is some text inside of a div block.
Text M
This is some text inside of a div block.
Text S
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Text L Tab
This is some text inside of a div block.
Text M Tab
This is some text inside of a div block.
Text S Tab
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Text L Mob
This is some text inside of a div block.
Text M Mob
This is some text inside of a div block.
Text S Mob
This is some text inside of a div block.

Rich Text

Rich Text

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

How to customize formatting for each rich text

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.

Colors

The color suite is based around a 4 color system, but can accommodate bonus colors at the end of the palette. Class names are not intended to be changed. Customization of colors should be done by editing the color swatch, rather editing than the classes directly, in order to avoid breaking how the colors are mapped to elements (Text - Primary, Background - Primary, Button Primary, etc.).

Background - Black
Background - White
Background - Primary
Background - Secondary
Background - Tertiary
Background - Quaternary
Background - Neutral 1
Background - Neutral 2
Background - Neutral 3
Background - Neutral 4
Background - Neutral 5
Background - Neutral 6
Background - Bonus 1
Background - Bonus 2
Background - Bonus 3
Text - Primary
This is some text inside of a div block.
Text - Secondary
This is some text inside of a div block.
Text - Tertiary
This is some text inside of a div block.
Text - Quaternary
This is some text inside of a div block.
Text - Black
This is some text inside of a div block.
Text - White
This is some text inside of a div block.

Buttons

Knockout's button suite relies heavily on inheritance. Basic styles like type and corner radius are defined at the Button class level, so always customize these elements at the broadest level that makes sense.

Button
Primary
Button Text
Button
Secondary
Button Text
Button
Tertiary
Button Text
Button
Quaternary
Button Text
Button
Black
Button Text
Button
White
Button
Inverted
Button Text
Button
Inverted
Primary
Button Text
Button
Inverted
Secondary
Button Text
Button
Inverted
Tertiary
Button Text
Button
Inverted
Quaternary
Button Text
Button
Inverted
Black
Button Text
Button
Inverted
White
Button
Transparent
Button Text
Button
Transparent
Primary
Button Text
Button
Transparent
Secondary
Button Text
Button
Transparent
Tertiary
Button Text
Button
Transparent
Quaternary
Button Text
Button
Transparent
Black
Button Text
Button
Transparent
White
Button
Disabled
Button Text
Button
Disabled
Primary
Button Text
Button
Disabled
Primary
Button Text
Button
Disabled
Tertiary
Button Text
Button
Disabled
Quaternary
Button Text
Button
Disabled
Black
Button Text
Button
Disabled
White
Button Text
CTA
Primary
Text Link
CTA
Secondary
Text Link
CTA
Tertiary
Text Link
CTA
Quaternary
Text Link
CTA
Black
Text Link
CTA
White
Link Block