Setting up a styleguide in Webflow

To brutally simplify it, a styleguide is a set of defined rules for elements in your design or layout. There are merits and faults with styleguides, but I'll leave the responsibility of describing those to other articles.

This article's purpose is to share our Webflow template and instructions on how to use it.

The template

Our template has evolved several times and will likely continue to do so. It is an amalgamation of different styleguides and advice from several sources, adapted to help with my workflow.

You can view it on Webflow here.

Before jumping into defining the styleguide it is essential to have the design created in your favourite design tool (we've recently moved over to Figma from Sketch). Otherwise there's nothing for you to define.

Global typography

The first thing you're going to want to do is define the font styles for the overall website. This allows for a quick base that can be overridden as needed.

Select one of the elements and select the "All [TAG NAME"] from the selector in the styles tab. Define your styles and move on to the next one. These styles will affect all tags throughout the project unless you override them with custom classes or styles.

I find that it is best to leave these elements without margins or padding unless it is essential to add them. Their purpose is to simply define the typography styles and care about colour, positioning, and transitions when they are in the layout.

Rich text typography

The difference between this section and global typography is that this only affects elements that exist within a Rich Text element. Changing the styles here will not affect the styles for global elements. However, changing styles in global elements may update these unless you've provided overrides.

It is here that I define the margins and max-width of the elements. When creating a client project you rarely have control over the content they will be adding. With the flexibility of a rich text editor, the combinations of elements is endless. Although the hierarchy and structure can be assumed based on the client's requirements, there is the possibility of them adding an awkward mix of headings. This flexibility must be considered when defining the spacing for each of these elements.

I sometimes add styles to the global custom code that will add specific margins when certain tags follow others in a rich text element (e.g. an image following a paragraph).

Color

I use this section to define the colour swatches that I will use in the project. Sometimes adding additional colour blocks when the colour palette of the project is beyond the base set.

Logo

I've often forgotten about this section. It has little value unless you wish to define the logo styles outside of the layout.

Form elements

Does what it says on the tin, with a hidden second layer. There are some docs for the date picker.

Additional elements

I use this section to add miscellaneous elements that might be repeated throughout different projects. For example the burger menu animation (also contains docs) and the credit link for the footer.