Showcase
Webflow Style Guide | Class Structure
Sep 2022
Mesai Memoria
Design System
Webflow Development
Role
Webflow Developer
Timeline
Indefinite
Summary
Two years ago, as a beginner in Webflow, I frequently created new classes for element styles, leading to a cluttered stylesheet. Eventually, I started organizing classes, beginning with typography, but struggled to maintain consistency across projects. When I was college, I relied on Tailwind CSS, finding it efficient and easy to use, and wanted a similar structure for my Webflow projects. As a result, I developed a streamlined Webflow class structure, shared it with colleagues, and improved collaboration and efficiency in our Webflow development process.

The Struggle

As someone who started using Webflow two years ago as a beginner, I used to create new classes every time I wanted to change an element's style. Unfortunately, this led to a cluttered workflow as I rarely reused existing classes. My rationale was that I didn't have enough time to organize or prioritize structuring my files, so I just focused on getting things done quickly.

Over time, I made an effort to organize my classes, beginning with typography by creating standard classes for headers and body texts. This positive step also led to organizing other design elements. However, I encountered a new challenge. I only organized classes on a per-project basis, lacking a consistent standard structure across all my Webflow projects. As a result, it sometimes became difficult to maintain continuity and efficiency when switching between different projects.

My Realization

Along my journey, a significant realization struck me: in every project, I found myself repeatedly creating boxes with padding, margin, and positioning, etc. I asked myself, how can I make it so that I don’t have to create a class structure for one project but create a structure that is reusable for all Webflow projects and it can also be understood by other Webflow developers during project turnovers?

Back when I was still in college, I often use Tailwind CSS for all my web projects. Having that CSS library was a game-changer, making everything so much easier and efficient. I wanted to have the same structure too now that I create websites in Webflow.

So that’s how my Webflow class structure was born. I use it as a reference every time I kick-start a new Webflow project. Moreover, I didn't keep this game-changing approach to myself; I shared and taught it to my fellow Webflow developers within the company. This made collaboration more efficient and now we have a shared understanding on how we structure our projects making our Webflow processes streamlined.

The Structure

I only added classes in this sheet that I know are universal classes. Below are styles that are used across all projects regardless of what it is.

Section and Wrappers

Section Guidelines - Container Wrapper & Div Wrappers

Example Visualization

Wrapper Classes - Usage Visualization

Div Block Wrappers

Element Wrapper
Group Wrapper
Position Wrapper

Example Visualization

Wrapper Classes - Usage Visualization

Typography Classes

Typography Class Naming Structure

Webflow Live Example

Applied classes in style selector
Applied wrapper in navigator

Notes

There are still many things I can improve on this sheet but I am happy on how this helped me through the years. I am planning to continue to build upon this overtime as I create new Webflow projects. I hope this structure can be a reference too to other Webflow developers.

The Struggle

As someone who started using Webflow two years ago as a beginner, I used to create new classes every time I wanted to change an element's style. Unfortunately, this led to a cluttered workflow as I rarely reused existing classes. My rationale was that I didn't have enough time to organize or prioritize structuring my files, so I just focused on getting things done quickly.

Over time, I made an effort to organize my classes, beginning with typography by creating standard classes for headers and body texts. This positive step also led to organizing other design elements. However, I encountered a new challenge. I only organized classes on a per-project basis, lacking a consistent standard structure across all my Webflow projects. As a result, it sometimes became difficult to maintain continuity and efficiency when switching between different projects.

My Realization

Along my journey, a significant realization struck me: in every project, I found myself repeatedly creating boxes with padding, margin, and positioning, etc. I asked myself, how can I make it so that I don’t have to create a class structure for one project but create a structure that is reusable for all Webflow projects and it can also be understood by other Webflow developers during project turnovers?

Back when I was still in college, I often use Tailwind CSS for all my web projects. Having that CSS library was a game-changer, making everything so much easier and efficient. I wanted to have the same structure too now that I create websites in Webflow.

So that’s how my Webflow class structure was born. I use it as a reference every time I kick-start a new Webflow project. Moreover, I didn't keep this game-changing approach to myself; I shared and taught it to my fellow Webflow developers within the company. This made collaboration more efficient and now we have a shared understanding on how we structure our projects making our Webflow processes streamlined.

The Structure

I only added classes in this sheet that I know are universal classes. Below are styles that are used across all projects regardless of what it is.

Section and Wrappers

Section Guidelines - Container Wrapper & Div Wrappers

Example Visualization

Wrapper Classes - Usage Visualization

Div Block Wrappers

Element Wrapper
Group Wrapper
Position Wrapper

Example Visualization

Wrapper Classes - Usage Visualization

Typography Classes

Typography Class Naming Structure

Webflow Live Example

Applied classes in style selector
Applied wrapper in navigator

Notes

There are still many things I can improve on this sheet but I am happy on how this helped me through the years. I am planning to continue to build upon this overtime as I create new Webflow projects. I hope this structure can be a reference too to other Webflow developers.