Creating the Perfect Style Guide in Webflow
Whether you’re a professional designer, or a complete Webflow beginner, you’re probably already aware that a style guide is one of the most important steps to get right when starting a new project.
A proper style guide helps us to stay consistent throughout the whole development process, and therefore saves us lots of time and trouble. Even if you for some reason isn’t a fan of using style guides, trust me, it will simplify things.
While a style guide might look pretty similar in whatever development tool you‘re using, there are a few specific elements that can really help you speed up your process in Webflow.
This article is a short but still fairly comprehensive guide that hopefully will help you get going or improve your Webflow style guides. It does not include setting up a component library, and it does not account for those super large projects with hundreds of unique pages, which is a whole ’nother thing.
Let’s go.
Typography
Let’s start with arguably the most important design elements in web design; typographical elements.
Headings
When it comes to headings, it’s a good idea to disconnect the styling from the HTML tag. For example, a H2 heading could need to be really large in a blog post, but really small in a FAQ accordion. The heading hierarchy and style should not be connected.
That’s why I create display classes that are used exclusively for headings on all static pages of my websites. These are classes that varies in sizing and sometimes a couple other parameters.
A Display 2XS class is typically a bit smaller than the default paragraph size of the design, and the classes above are increased in steps of 0.25–0.5 REM. This covers all of my heading needs.
Typography Defaults
Even though classes are needed for the styling of all our typographic elements, giving them all a default style is absolutely needed as well.
Some of the most important default changes can be done on the Body tag. These includes:
- Default line heights
- Default text color
- Default font
Another thing I always do is to remove all margins from all headings & paragraphs, changing all pixel based units to REM’s and style default text links.
Other optional changes to the defaults are for example:
- Change default colors & spacing on quote blocks
- Change default spacing on lists
- Change line height on headings & paragraphs
Rich Text
Rich text elements are typically used for articles, blog posts and similar long-form content. Therefore, it’s common that you want to style these slightly different than the rest of the site. This could be as simple as using a serif font for the paragraphs or different sized headings.
When styling rich text content in Webflow, you want to make sure that every element you style is nested inside of your rich text content class. This is done by giving your rich text block a unique class name, selecting an element inside the rich text block and pressing the “When nested inside of” your class.
Since I remove all default margins of my text elements, the most important change I do is to give all headings, paragraphs, figures and lists a bottom margin. This will space out the elements in a readable way.
A tip is to create a new variable called something like Rich Text Body Margin, giving it a number (usually something between 2.5 REM — 3 REM) and setting this variable as the bottom margin for all your post body elements. For headings, you could create another variable of something like 0.3 EM to space their bottom margin based on their own text size.
Forms
Most websites will contain a form in one form or another. Even a simple style guide will probably be needing the following elements:
- Text input
- Message input
- Checkbox
- Submit button
- Labels
Now, it’s also important to style each input’s different states. Let’s take a simple text input as an example:
- Hover
- Pressed
- Focused
- Placeholder
An easy way to simplify this is to create a generic Form Input class with all states styled, and share it between different inputs, while still being able to customize each one uniquely using combo classes.
Icons
It can be a good idea to prepare icon sizes for your project. I usually have a few Icon classes between XS — XL, all having a slight increase in width & height.
If you’re developing dashboards or larger projects, you might need a lot more icon variations.
Colors
Webflow’s new CSS variables feature has made it really easy to work with colors in the designer. Simply pull out all unique colors from your design, create a new variable for each one of them, paste the HEX code and you’re set.
I usually create a simple “color box” in the style guide, just to give a better visual view of all the colors.
These usually consists of 5–10 shades of black & white, and a few shades of whatever accent colors the project requires. Color theory is hard, and I like to keep it simple.
Layout Grids
Grids are some of the most useful tools to use when it comes to layouts. They help you stay consistent throughout your whole site by giving you evenly spaced columns in which you can automatically, or manual place elements in.
For my projects, I only ever really need one type of grid class:
- 12 columns on desktop
- 8 columns on tablet
- 4 columns on mobile
- 0.5 REM min, 1 FR max column size
A typical text based layout in a layout grid might look something like this in the designer:
Flex
Have you seen the new V Flex & H Flex elements that Webflow semi-recently added as their own elements? These are perfect if you’re a fan of following the “parents decide the position of their children” rule.
V & H stands for Vertical and Horizontal respectively. Instead of positioning children elements using margins (or padding for that matter), we’re creating wrappers that positions them and spaces them out using flex gap.
In order to accomplish this, I setup generic flex wrapper classes with different vertical and horizontal gaps.
Now, where can these wrappers be used? Well, basically everywhere. This is an example of the hero title of my latest Webflow template Smiley:
As you can see, each element of the hero is wrapped in a class of V Flex XS. That class spaces out its children vertically using a 0.75 REM flex gap.
In order to stay consistent when using this technique, removing any default padding or margins of all your Webflow element is very important.
States
The last category of styles I’m gonna go through is states, or what I call state boxes. These are used for collection lists & forms, providing a default style for whatever messages these need to communicate.
Typically these are an empty state, and an error state.
When having these pre-styled, it’s super easy to just give for example an empty collection list just a class, and everything will look good.
Conclusion
Okay, that’s that. Hopefully you found some value of this short guide on style guides. If you have any questions, feel free to send them in the comments below, or message me through my personal site.
Have fun :)
