Creating and reusing a style guide template

 

You can create a style guide template that you can use to create the style guide of any new project.

Creating the template

To create a simple style guide template:

  1. Create a project with a single page
  2. Add a section onto the page
  3. Add at least one of each element that has an HTML tag you can style
  4. Do not add any classes to these elements

Pasting & styling the template

To use this template in a new project:

  1. Create a new page in your new project. Call it “Style guide”.
  2. Save the page as draft
  3. Go to the template project
  4. Select and copy the section
  5. Paste in the “Style guide” page of the new project
  6. Select each element and style the HTML tag of that element

This way, you can get all the tags that you plan to use in this project set up. This saves you a lot of work and time. Learn more about styling HTML tags.

Don’t forget to style the Body (All Pages) tag. Since you can't copy/paste a page's body, you can’t include it in your style guide. However, you can select the body element on the “Style guide” page, then select and style the Body (All Pages) tag. Learn more about the Body element.

Cloneable Style Guide

Building out a page with all these elements can be a hassle. So, we did it for you — by building a cloneable project that contains all the HTML tags available to style in Webflow. Just clone the HTML tags project to your account, then copy-paste the whole thing into every new project to kickstart your next website with a clean style guide.

Helpful resources