Showcase
Webflow Style Guide | Class Structure
Sep 2022
Mesai Memoria
Design System
Webflow Development
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.
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.
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.
Example Visualization
Example Visualization
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.
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.
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.
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.
Example Visualization
Example Visualization
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.
