Instructions

How to edit the Sidenote template.

Using Variables

Sidekick uses Webflow Variables to define color, typograhy and sizing values across the template. To access Variables, go to the left-hand menu and select Variables. The Variables are organized in 8 categories.

Typography

Set your font parameters for the Main, Heading, Button and Form typography. Font sizes are set separately in Typography Size.

Typography Size

Set the font size for Headings and Main font across all breakpoints. Note that there is a separate class of variables for setting Heading sizes inside a Rich Text component (using the Rich Text class).

Colors

Set the swatch (collection of colors) and then apply the swatch to different parts of the design such as Typography, Buttons, Forms and Layout.

Border Radius

Set the global border radius used across all components in the design. Note that you can set a different broder radius for Buttons and Forms.

Sections

Set section paddings across breakpoints.

Containers

Set Container width and paddings across breakpoints.

Spacing

Sidekick uses Spacers to create horizontal space between elements. You can set the Spacer sizes across breakpoints here.

Icons

Set Icon sizes across breakpoints.

Naming Convention

Sidenote uses a simple naming convention describing what the element is. All letters are capitalized. For example Rich Text or Form Input.

Some copoments use combo classes to alter the main style. For instance Paragraph also has a combo class Small, that makes the font smaller.

All styles are listed in the Styleguide.

Grid Naming Convention

Grids use a global Grid class with a combo class to indicate the number of columns and layout of the grid. For instance Grid 2 is going to have two equal columns. Grid 1-2 is going to have one narrow column on the left and one column spanning two columns on the right.

Page structure

Pages have the following structure:

Body
- Sidebar (tagged as Header and containing the site navigation)
- Main (tagged as Main)
  - Section
    - Container
      - Page Content