Webflow frameworks are a relatively new concept considering that Webflow was founded in 2012. While I’m not sure entirely sure when the first framework was created, they have significantly grown in popularity over the past couple years. As of right now there are several different options when it comes to choosing a framework and each of them has a very different approach which can make it confusing when making a decision on which one to go with for a new Webflow build. Below i go into specifics about the methodology, benefits, and possible downsides of the Client-First, MAST, and Lumos frameworks.
A quick disclaimer
Before getting into the breakdowns I wanted to give a disclaimer, the opinions below are based on my opinion and experience working with these frameworks. I have over 4 years of experience working with Webflow and have quite a few client projects under my belt at this point but everyone has their own development style and so at the end of the day you should pick whatever works best for you and your clients, my only goal here is to help you make a more educated decision. Before diving in, let’s start with the basics.
What is a Webflow framework?
A Webflow framework is a system that gives detailed instructions on how to structure a Webflow site. A good framework will include documentation that includes class naming, page and section structure, usually some type of utility system, and a cloneable style guide to use when starting off new projects.
The benefits of a framework
It’s important to note that while I will be comparing several frameworks below and talking about their pros and cons, using any framework has some major advantages vs just winging it.
Learn and use best practices for Webflow development
First off, each of these Webflow frameworks will help educate you about (and enforce) best practices. Learning one (or all) of them will help you become a better Webflow developer and so even if you decide at the end of the day that a specific framework isn’t for you it won’t be time wasted.
Work smarter, not harder
The second main benefit of using a framework is that it helps you work faster. Being able to have classes that are already styled that you can add to an element (whether it be a button, heading, or even a layout) is a huge boost to productivity.
Make sites that other people can edit.
Finally, using a framework is incredibly helpful when it comes to collaboration within Webflow. Whether that is working with other people on your team or handing it off to a client, having clear documentation explaining how a site was built is incredibly important when it comes to keeping a site organized. As soon as a site starts getting classes like Div Block 12 and Image 28 it becomes much harder to manage global updates and quickly add new content to a site.
Why focus on these specific frameworks?
I’m not going to discuss every framework out there in this article. Each of the three frameworks I’ve listed in this article are the only ones that matched the following criteria:
- Include thorough documentation on typography, color, page and section structure, a utility system, and class naming conventions.
- Have gotten a lot of love from the Webflow community, are well crafted and created by people who have a lot of technical knowledge about Webflow and web development.
- Is a framework that I have read all the documentation for, tried out on a project, and found enjoyable to use.
At the bottom of the article I’ve included a few honorable mentions of other frameworks, that while I haven’t personally meshed with as much, are still well thought out and deserve recognition in case you want to check those out too.
Now that we’ve covered the basics lets jump into the frameworks themselves.
Client-First was the first framework that really blew up in the Webflow community (it launched August 2021) and is by far the most used one out there. If you’ve heard of any Webflow framework its most likely this one, and that comes with some advantages, but some Webflow developers aren’t aware that there are other options out there and knowing what the options are is the first step in making an informed decision.
Client-First was developed by the team at Finsweet, an enterprise Webflow partner that has done huge amounts of good for the community, and they were one of the first agencies to really champion the benefits of using frameworks and take them up a notch in terms of quality. Earlier Webflow frameworks were mostly just cloneables that included typography that was already responsive, some buttons, and maybe some global structure classes. Client-First stood apart because they created super in depth explanations that didn’t just cover the how, but the why. Reading through the docs helps you understand the roles of different types of classes, various strategies you can use when building a site, and what the pros and cons are when it comes to things like stacking combo classes.
One of the key aspects of the Client-First system is that anyone should be able to use it, from people who have just finished learning the basics of Webflow to developers with years of experience. If you look at any element in a Client-First build you should be able to tell what the element is for and where it is used just by reading the class name.
This has a couple of large implications, firstly no abbreviations. While a lot of development systems use abbreviations to make things quicker to type Client-First avoids them in favor of full words, so it is common to get class names like home-header_background-image. While this does make it much easier for anyone to read this definitely has its downsides, (which I’ll go into soon).
Another key aspect of Client-First is that it has a pretty minimal utility system. Typography, color, spacing, and core structure classes are included but any layouts or anything that requires any other CSS properties is given a custom class. Once again, this plays into the ease of use and lower learning curve. The odds of a Webflow novice coming into a build and making unintended changes are much lower when the class they are modifying has a very specific and narrow purpose. Client-first tends to have a lot more custom classes than builds using Mast or Lumos because of this.
1. Beginner friendly(ish)
In terms of benefits one of the main ones is that it is an easier system to learn than the other two. This is offset a little by Client-First having the most thorough (and intimidating) documentation of the three. However, overall it is a system that is more forgiving towards people who aren’t professional Webflow developers.
2. Widely known and used
Being incredibly popular means that using Client-First has good name recognition. Some clients will ask specifically for developers who know Client-First because they know that a build will be more organized and predictable than if it built by someone who doesn’t use a framework or hasn’t learned one.
3. Incredible amount of resources.
You can’t get away with talking about Client-First without also mentioning Relume Library. In case you haven’t heard of it, Relume library is a Webflow component library that is built using the Client-First system allowing you to quickly copy and paste from a huge library of pre-built minimally styled components into your Webflow project. This drastically speeds up the amount of time it takes to build a Client-First site. Along with Relume library the Finsweet Chrome extension also pairs really well with the system, allowing you to bulk rename classes based on their folder names. Additionally, the Finsweet team published over 10 free cloneable sites built with the system that you can use to learn (or even as a starting point for your site). Of all the Webflow systems Client-First definitely has the most amount of resources which is definitely a huge benefit to using this system.
In spite of all of those benefits Client-First does have some downsides and it is important to be aware of them before going all in.
1. Projects get bloated.
2. Harder to make global changes
While some global changes (like adjusting page padding, or font size) can be easily made, what if you want to update the spacing underneath every h2, or change all your images to have a larger border radius? With Client-First there is no easy way to manage these kinds of updates and so it can result in a lot more time spent when it comes to website maintenance (especially on larger sites).
3. Slower to build with
Because of the smaller utility system, additional layers of divs, and longer class names, building in Client-First is more time consuming than in other systems. This extra time can be eliminated by using Relume library but that does require a paid subscription so it is still worth noting that the native system is not a quick to build with as the alternatives.
All in all Client-First is an incredibly well thought out and documented framework that has a lot of community resources attached to it. It is definitely worthwhile to learn and can be great for a lot of different websites. That being said it does have downsides when it comes to site updates and speed, especially when used on larger websites. I’d definitely recommend looking into this system even if you don’t want to use it because you’ll probably learn some helpful things about how Webflow works and there’s a decent chance you’ll encounter Client-First builds in your Webflow career. Now on to the next framework.
This framework was released in March 2023 by NoCodeSupplyCo, but it utilizes a lot of ideas from traditional Web Development that pre-date Webflow. The system comes with a really well thought out naming convention that balances clarity with brevity in an elegant way. Throughout the past few months its gotten a lot of praise and has a growing community of devs that swear by it.
Mast addresses a lot of the same concepts and structures as Client-First but with a different approach. At the core Mast is built to help you to create sites more quickly by providing a set of strategies and utilities that speed up the process of Webflow development while keeping the system as light and clean as possible. One example of this is that headings come with bottom margins applied to try and help you have to apply spacing less often, occasionally you’ll need to override the margin with a unique class but if most of the time it works out of the box that’s one less thing you need to worry about when building a section.
Along with this, Mast is trying to minimize the amount of classes you need to create, which it accomplishes in several ways. Firstly Mast includes a layout system built on a 12 column grid, (a layout system that’s been used almost as long as the internet has existed). This system reduces the need for a lot of custom classes but can have its own tricks and difficulties when it comes to modifying it. Another example of this minimalist approach is that the typography system only includes 4 heading styles by default (with the option to add an h5 and h6 if needed).
1. Work faster with less classes
Mast allows you to build sites quicker than Client-First does. Little things like the heading margins using ems so they automatically scale with the text size are a major time saver. Also, having a layout system included allows you to build new layouts without needing to add new classes is definitely a nice touch. It can take a little getting used to with regards to which combo classes you need to add in order to align things how you want them but its incredibly flexible and still leaves room for custom classes when they are necessary.
2. Keep it light
The methodology, naming convention, and overall structure makes it extremely easy to browse through a Mast project. This also comes with performance benefits as well, the base CSS in the Mast cloneable is only 32 KB which is very impressive for how much it still covers.
3. Concise class names
Of all the systems in this list, class names in MAST are going to be the most concise. The system of prefixes and infixes is really clear and the overall convention is close to BEM which will speed up the learning curve for anyone with traditional front-end development experience.
1. Difficulty with layout system updates
Personally, I find the layout system a little frustrating to use. The longer you stick with it the faster you get so I’m sure for someone who uses MAST on every build they’re very quick at making updates but it does feel like a bit of an uphill battle due to the amount of combo classes needed on each column and row div. For me this primarily comes into play when making modifications on an existing layout (especially on mobile breakpoints). Remembering which combo classes you were using and removing them and re-adding them can be a frustrating workflow, and while it does save on additional CSS its worth considering if it will speed things up for you or slow you down.
2. Can’t update layouts globally.
The flip side of not having to create new classes for individual layouts is that it becomes much harder to make global changes to layouts. If you have a gallery section that needs an additional column there is no way to update this if the layout is used throughout the site without having to manually update each instance of the layout. This can be mitigated by using Webflow components but depending on the type of section that might not always be the best solution either.
3. Relies on a 12-column grid.
While this is in a sense both a positive thing and a restraint it is important to note that because the MAST layout system uses a 12 column grid, it is important that the design you are building matches that. While this can be a helpful design constraint for yourself, if you’re working with a designer who doesn’t use this it may make the design to development transition a bit more difficult.
Overall, MAST really plays to the benefits of Webflow, it helps you to create layouts quickly, manage key design features globally, and overall create a site that is organized, performant and intuitive. I think the main dealbreaker for most people (at least it was for me), is how well you work with the 12 column layout system. If you find designing, building, and updating layouts with that system to work well then the rest of MAST will probably click really easily. Now on to Lumos.
Lumos by Timothy Ricks (released on July 30th, 2023) is the newest of the frameworks on this list. It takes a radically different approach compared to Client-First and MAST. While it is definitely more challenging to learn, the added complexity comes with a lot of really unique benefits that no other Webflow framework has offered up until this point. I’ve built a couple client sites using it and I think it is going to be the one that I use whenever I can justify it moving forward (more on that later).
What sets Lumos apart from every other framework is its unique utility system. Most Webflow frameworks include utility classes for setting consistent styles like headings, font weights, spacing etc., but to use these utilities you need to add each of them as combo classes. This can often result in an element needing 4+ classes in order to style it correctly. In traditional web development this wouldn’t be an issue but in Webflow you can’t copy and paste all classes on an element, or re-arrange classes, or easily delete or rename one in the middle of a list. Because of this, most other frameworks recommend just creating custom classes once you hit 3 or 4 stacked classes. This approach gets around the combo class frustration but detracts from the value of the utility system and makes things harder to update down the road.
Lumos deals with this problem in a really creative way. Rather than creating your utilities as individual classes and setting them up in the style panel they are going to be controlled in a custom code embed and referenced in classes and attributes throughout your site. Because of this approach, the way you name your classes can reference values within the custom code embed taking the level of global edibility to another level entirely. For example if you create a class called testimonial_card--br1, the br1 stands for border radius 1 and is going to give the card a border radius that you have defined in your code embed. Lumos takes this setup and applies it to Layout, Spacing, Typography, Color, and other various utilities. To better understand how this works check out this quick video by Timothy Ricks
1. Global Edits on a completely new level
The Lumos utility system allows you to have much more control over global edits by being able to update values in the code embed to easily make site-wide changes. For example if you have all your gallery images and cards throughout the site share the same border-radius and you want to update it from 24px to 48px you can do that in under a minute by updating the value in the custom code embed rather than having to track down each element that uses that border radius and manually update it. At the same time if you just want to update one of those elements you can also just update the class name to reference a different border radius utility or remove it altogether.
2. Unlock the power of color modes
Lumos has a really unique approach to color that is based on design system best practices. To summarize, when you set up the styleguide you’ll define the font, background, and border colors for each mode and that is going to dynamically update the colors of elements inside any given section, card, tag, link, and button. While it is definitely one of the more complex parts of Lumos it is also one of the most powerful. Using the color system you can completely recolor a section or page by changing the name of a class or attribute, making it incredibly easy to set up light and dark mode transitions, change the page color based on scroll, and more. On a recent client project I was able to make the navbar match each of the four unique color modes when they were scrolled into view. For more details on how this works check out this tutorial.
3. A mobile first spacing and sizing system
Another one of the great benefits is that you can quickly create layouts and update spacing in a way that is mobile first and is connected to the class. While both of the other frameworks include spacing systems that are responsive, neither of them are tied to the class name. In Lumos however, you can easily add a unique bottom padding for your gallery_h2 using the utility system and its going to update everywhere that class is used while also decrease sizing on mobile (in Client-First and MAST adding spacing is done using a combo class, or a wrapper div which means tracking down each instance of that space and updating them individually). The same goes when creating grid layouts in Lumos.
4. Webflow components that you can make design changes to
Lumos integrates really seamlessly with components, each of the color modes and the core section spacing utilities also have an attribute selector. This means that you can create components with the option to modify the vertical and horizontal spacing, button styles, color modes and more without having to unlink the component. This level of versatility just isn’t an option in the other two frameworks without having to write a lot of custom CSS for each specific component.
1. High complexity
I’d say by far the biggest downside of Lumos is that it is much more complex to learn than the other two frameworks, this can definitely be overcome by putting in some effort to watch through Timothy Rick’s tutorials but it becomes more of an issue when it comes to collaboration and client hand-off. It takes some adjustment to know if you should edit styles by changing the name of a class to reference a different utility, change a utility value in the code embed, or use the styles panel. Compared to the other two frameworks Lumos uses Webflow in a way that is more clever, but less intuitive for beginners (more on this below).
2. Design system flexibility
Because Lumos is closely related to design tokens it works best when the design you are working off of has a lot of consistency. In many cases this is a good best practice and can make you a better designer when you have this framework in mind. That being said, for those developing someone else’s designs, consistency isn’t always a given. Additionally, some brands require more visual variety than others. This issue becomes especially noticeable when it comes to the color system. If the design you’re building uses 5+ text colors and has no clear delineation between color modes then using Lumos is going to be an uphill battle and you may spend more time fighting the systems in place rather than benefiting from them.
3. Convoluted class names
One part of Lumos that takes a pretty big adjustment is learning to read and understand the long class names. Because the second half of a Lumos class is a reference to different utility variables it is much less legible on first glance. Seeing a class with blog_list--gd1-gp2-cd3-ct2-cl1 might not be clear as to what the class is doing when you’re first getting started. Eventually you learn to quickly understand utility abbreviations and know that the blog list is just a responsive grid with a 2rem gap, but there is definitely an adjustment period and this makes the system even less intuitive for those who are newer to Webflow.
Overall, Lumos is definitely the most circumsantial framework of the three on this list but it comes with advanced features that no other framework is going to include. While it definitely has a learning curve, Lumos is incredibly well though out and is an excellent addition to the Webflow ecosystem and community. Personally I’m going to be using Lumos whenever I can but I’m also aware that not every project is going to be a great fit for this system depending on the design system, client skills, and level of client involvement.
So which one is right for you?
Okay, so you’ve read through this whole blog post (or maybe you skimmed it), and now you need to decide which framework to learn and use. To be honest, if building in Webflow is a big part of your job I’d recommend learning all three. Each of the above frameworks will give you valuable knowledge on how to build sites more efficiently, sustainably, and accessibly. That being said, if you don't know any of them you need to start somewhere. If you're new to Webflow I would recommend learning Client-First to start, then MAST and/or Lumos depending on which one sounds more beneficial to you. Whether you build a full site (or several) with each one or just spend time reading the documentation is completely up to you.
The needs for each developer, client, and website are different but its important to make an educated decision as to what framework is going to be the best fit for a project. Beyond understanding your personal development style there are a few main factors when it comes to choosing a Webflow framework.
- Who is going to be the final person (or team) that is updating this website, and what skill level are they when it comes to using Webflow.
- How was the design built, is it using consistent design styles or is there a lot of variation in color, typography, horizontal padding etc.
- How many pages will the site be, is this going to be a 20+ page site that keeps growing with an expanding tech startup, or just a few pages and focussed primarily on interactions.
Each of these factors can make a big difference. A larger site is going to be harder to make global updates to so using Lumos would have more significant benefits and would probably be worth a bit more onboarding time. If a client wants a lot of control in the Designer but isn’t very knowledgable with Webflow, Client-First is probably the best bet because it is the most forgiving due to the amount of custom classes it uses. Maybe you are part of a mid size tech company that needs to focus on performance but still enable marketing teammates with less Webflow knowledge to make updates in the designer so MAST is your best bet.
Ultimately there is no one right answer. For me, most of my projects are for clients that need sites between 5-20 pages. Generally, my client’s aren’t Webflow professionals but they still want to be able to update their own sites. Some clients are happy just using the editor and will contact me anytime they need larger design updates or new static pages, but some would rather mess around in the designer and try to figure things out themselves. I’d encourage you to think about which aspects of the site are most important for you (easy onboarding, performance, maintainability, consistent design systems etc.) and let that inform your decision. I’ve put together a little rubric that attempts to visualize how I make the decision on which framework to use for a project, but these factors are going to be different for everyone. Note: the below graphic isn't meant to imply that the frameworks only work under the following circumstances, just that this is how I make the decision on which system to use.
Like I said above, the three frameworks I dove into in this article are the only ones that I have spent enough time with to really understand well and use on client projects, but there are a lot of other ones out there that are also well thought out (even if they didn’t really fit my development style), so I wanted to shout out a few others that are definitely worth checking out. There might also be others I haven’t heard about so this definitely isn’t an exhaustive list but hopefully its a good starting point as you continue your Webflow journey.
Hatch (by Mackenzie Child) was actually one of the earliest frameworks to get released, and launched in October 2020. I didn’t focus on it for two main reasons. The first is that the documentation is much less robust than the other frameworks on this list, it includes a lot of utility classes but doesn’t go into as much depth on naming convention, page structure and other details. The second is that it is definitely a stacked class based utility system and I find those to have a lot of downsides (some of which I discussed above) when it comes to working in Webflow. That being said Hatch was definitely a huge milestone in the community and definitely laid the groundwork for a lot of the frameworks that came later. Huge props to Mackenzie Child for putting a lot of work and thought into this one.
Knockout (by Edgar Allan) has a lot of similarities to Hatch but is more robust. It came out in February 2022 and provided a very different workflow from Client-First which was gaining a lot of popularity. It is also a utility first system that relies on deep class stacking (as opposed to custom classes) but it is more detailed and feature rich. The documentation is really thorough and a lot of thought went into dealing with some of the downsides of Webflow class stacking (like naming the colors based on their role eg Primary, Secondary… instead of the color name so that the values can be changed later without it messing up stacked classes). Ultimately I just found the class stacking workflow to be frustrating to use but it is definitely a viable system and absolutely worth checking out if you want a framework with a lot of utility classes built in.
The System by Matías Pitters is another framework worth looking into. Matías is a Webflow expert with a huge amount of experience — he released this framework in September 2022. It includes a lot of interesting concepts including a naming convention with 4 different sub-spaces and a global layout based on one single class. Personally I just didn’t vibe with it as much as Client-First which I was using for most of my projects at that point but it is definitely worth checking out and has a lot of really cool ideas built into it.
Phew, that was a long one, if you stuck it out this far I really appreciate it. Hopefully this article helped you get a better understanding of what your options are and learn about the pros and cons of each framework. When it comes to Webflow there’s always more to learn but there’s also so many incredible free resources out there and it really is a wonderful community so I wish you all the best as you continue your Webflow journey. If you found this helpful feel free to send me a DM on Twitter!
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.