使用说明
How to edit the Sidenote template.
使用变量
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.
排版
Set your font parameters for the Main, Heading, Button and Form typography. Font sizes are set separately in 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).
颜色
Set the swatch (collection of colors) and then apply the swatch to different parts of the design such as Typography, Buttons, Forms and Layout.
圆角
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.
区块
Set section paddings across breakpoints.
容器
Set Container width and paddings across breakpoints.
间距
Sidekick uses Spacers to create horizontal space between elements. You can set the Spacer sizes across breakpoints here.
图标
Set Icon sizes across breakpoints.
命名规范
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.
网格命名规范
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.
页面结构
Pages have the following structure:
- Body
- Sidebar (tagged as Header and containing the site navigation)
- Main (tagged as Main)
- Section
- Container
- Page Content
- Container
- Section