Client First vs Lumos vs Saddle: Which Webflow framework should you use?

It takes a huge amount of time to build websites from scratch. Which is why frameworks exist, and are so popular. If you are building on Webflow, you are probably already using some framework.

Over the last few years, a lot of new and popular frameworks have popped up, giving developers the ability to build websites fast and save time on every build.

In this blog, we’ll go over and compare 3 top Webflow frameworks (Saddle, Client-first, and Lumos) that you can choose from to build your or your client’s websites.

Now, none of these 3 frameworks are inferior to each other in any way, but they are well suited to different use cases and developers. What are these? We’ll cover in this blog.

We’ll break down each framework, highlighting its key features, benefits, and ideal use cases. And because we know that decision-making can be tough, we’ve put together a detailed comparison rubric to help you weigh your options.

Let’s begin.

‍

Understanding Each Framework

Before we compare these frameworks with our metrics, let us help you understand what each of these is, who is it built for, and the approach they take to build websites.

Client-First Framework by Finsweet

The Client-First framework by Finsweet is designed to be intuitive and user-friendly, catering to both developers and clients. It was developed to make Webflow projects easier to understand and manage, regardless of the user's technical expertise. Client-first is widely popular in the Webflow community and users because of its descriptive naming conventions and extensive documentation.

Who is it built for?

Client-First is built for developers who want to create websites that are easy for clients to edit and maintain. It’s particularly suitable for those who prioritize client involvement in the website management process, ensuring that even non-technical users can manage their sites effectively. Due to its ease of getting started and large base of pre-built utility and combo classes in the style guide, it’s also easier for beginner developers to get started with building websites using Client-First.

The approach they take to build websites

Client-First uses a highly descriptive naming system for classes, ensuring that the purpose of each class is clear. For example, a class name like padding-small, and margin-bottom immediately tells you what they do. This system makes it easier for clients and developers to understand the structure and functionality of the website. The framework encourages users to use clear, descriptive names for their classes to make site management straightforward and intuitive.

You can read more about Client-First here.

Lumos Framework

The Lumos framework, developed by Timothy Ricks, is known for its advanced customization capabilities and performance optimization. Lumos uses an extensive utility system and global variables to provide extensive control over design elements. It is designed to push the boundaries of what’s possible with Webflow, making it a powerful tool for experienced developers.

Who is it built for?

Lumos is built for advanced developers who need a high degree of control and customization. It’s ideal for those who are comfortable with a steeper learning curve in exchange for greater flexibility and power in their projects.

The approach they take to build websites

Lumos uses a unique utility system where elements start with a component class and utilities are stacked on top. This approach allows for extensive global edits and ensures consistency across the site. The framework heavily relies on global variables, making it easy to maintain and update design elements across projects. Naming conventions in Lumos are also well thought out, using component-based names like card_title for elements, and utility classes like u-text-h1 to specify styles.

Learn more about the Lumos framework here.

Saddle Framework

‍

The Saddle framework is a developer-first, client-focused Webflow framework created by Saddle. Webflow has evolved a lot in recent years, and Saddle was built to help developers make the most of Webflow’s new capabilities.

Inspired by various popular frameworks like Tailwind, BEM, Client-First, and MAST, this framework is focused on making the development process easier and faster for developers. It’s designed to increase efficiency, performance, and user-friendliness, making it easier for developers to build and maintain websites.

Who is it built for?

Saddle is built for developers who seek a balance between simplicity and efficiency. It's perfect for those who want to quickly onboard and manage projects while keeping a structured and consistent approach.

The approach they take to build websites

Saddle takes astructured approach with a clear and organized class naming system, drawing inspiration from Tailwind CSS. It uses what we call ‘developer language’ for its class naming. Utility classes have a "u-" prefix, while combo classes use "cc-". spacing is named with 2 letters like “lg”, “md”, and “sm”. Other classes have straightforward naming as well. For example, the class for heading 1 is .text-h1, and the section is .section.

Saddle encourages developers to use fewer divs to build a cleaner and more manageable codebase. So, instead of using another div for padding in a section, the .section class has padding by default, which you can then adjust with combo classes.

‍

This structured approach helps developers maintain a clean and manageable codebase, making it easier to update and scale projects. Learn more about our framework on Saddle Framework Documentation.

‍

Comparison: Saddle vs Client-First vs Lumos

Now that you understand what each of these frameworks is and how they work, let’s see how they stack against each other on metrics that you care about as a developer.

Ease of Use

When it comes to ease of use, the framework you choose can significantly impact your workflow, especially if you're a beginner or working on tight deadlines. Let’s see how Saddle, Client-First, and Lumos stack up against each other in this category.

Client-First Framework

As the name suggests, Client-First is designed to be highly user-friendly. It’s built to be intuitive not just for developers but also for clients who may want to manage their websites themselves. The highly descriptive class names make it clear what each element does, which is particularly helpful for clients and beginners.

However, we suggest you always ask yourself if your clients will be editing the website through Designer or only using CMS/editor.

Lumos Framework

Lumos offers a lot of features that give experienced developers extensive control, but this comes with a steeper learning curve. The utility system, while powerful, can be complex to get used to, requiring a solid understanding of CSS and Webflow’s capabilities.

Heavy reliance on global variables means that once you get the hang of it, making site-wide changes becomes very efficient. However, the initial setup and learning process can be challenging for those new to Webflow.

Saddle Framework

Saddle’s framework is designed with simplicity in mind, making it easy for developers to pick up and start using quickly. The structured naming conventions and clear documentation further make it easier to learn. With a straightforward class naming system and reusable components, developers can get up and running fast.

Saddle takes a developer-centric approach, making it very intuitive for developers to learn and use our framework, although clients may need more guidance to make edits without developer’s help.

Customization and Flexibility

Customization and flexibility may not be a critical factor when building standard websites. But when you aim to build an exceptional website or need a high level of control, the framework you use can become very important. Here’s how these frameworks approach customization and flexibility -

Client-First Framework

Client-First focuses on clarity and ease of use, which extends to its customization capabilities. The framework uses highly descriptive class names, which makes understanding and customizing elements rather straightforward.

Client-First also has a comprehensive set of utility classes that cover your major styling needs, so you can get all your quick adjustments done without any custom CSS. However, this extensive set of predefined classes might limit flexibility for developers who prefer a more granular approach to styling.

Lumos Framework

Lumos is known for its advanced customization capabilities. Using utility systems and global variables, Lumos provides developers with extensive control over design elements.

Once you have a good understanding of Lumos, you can easily create complex and unique designs on your website, but this comes with a learning curve.

Saddle Framework

Saddle aims to give you a balance of customization and simplicity. The framework uses a structured approach with clear naming conventions, which makes it easy to build and maintain consistent designs. Variables and reusable components are at the core of Saddle, allowing you to customize design elements like colors and fonts efficiently.

Saddle emphasises on keeping a cleaner codebase with minimal extra divs, making it easier to implement custom styles without cluttering the HTML structure. This approach ensures flexibility while maintaining simplicity.

Performance

Performance is a crucial factor when choosing a Webflow framework, as it directly affects site speed, user experience, and SEO. While all three frameworks aim to offer good performance, their approaches and emphases differ.

Client-First Framework

Client-First balances performance with its user-friendly design. While the descriptive class names and extensive utility classes might introduce some code bloat, the framework’s clear structure helps in managing and optimizing the codebase effectively.

With a little mindful development, you can achieve pretty performant websites with the Client-First framework.

Lumos Framework

Lumos offers great performance optimization if used correctly. By minimizing redundancy and optimizing for detailed global edits, Lumos ensures that websites maintain peak performance even in complex projects.

The framework is designed to handle heavy customization without compromising on speed, making it ideal for large-scale projects that demand high performance. However, achieving this level of optimization requires a good understanding of Webflow and CSS principles.

Saddle Framework

Saddle is designed with performance in mind, focusing on efficiency and speed. A cleaner codebase, fewer divs, and efficient use of variables ensure that your websites load quickly and run smoothly. Using components and variables often in your projects also means that it’s easier to maintain and edit your websites as it scales

This makes Saddle a solid choice for developers who want to build fast, performant websites without unnecessary bloat.

Scalability

Scalability is a key consideration when choosing a Webflow framework, especially if you're working on large projects or anticipate significant growth. Let’s explore how Saddle, Client-First, and Lumos handle scalability.

Client-First Framework

Client-First is designed to scale well, ensuring that even as projects grow in complexity, the framework remains manageable. Its structured approach helps maintain consistency across larger projects.

However, as projects become very large, managing the cleaner codebase might require additional effort.

Lumos Framework

Lumos is designed to handle large and complex projects by breaking them down into manageable components. Each component can be developed and updated independently, ensuring that changes in one area don’t disrupt the entire project. This makes Lumos great for bigger projects.

Saddle Framework

The Saddle framework is designed to handle scalability effectively, making it suitable for projects of various sizes. Building with the Saddle framework ensures that as your project grows, the codebase remains manageable and efficient.

This makes it a reliable choice for developers who anticipate their projects scaling over time.

Documentation and Support

Reliable documentation and support ensure that you can find answers to your questions, troubleshoot issues effectively, and leverage community knowledge. here’s how Saddle, Client-First, and Lumos stack up in this regard.

Client-First Framework

Client-First has extensive documentation that tells you everything you need to know about it. It provides detailed guides, tutorials, and use cases that cater to both beginners and advanced users. Client-First also has a huge user base and community, which contributes a lot of resources, including video tutorials, cleanables, blog posts, and forums.

Lumos Framework

Lumos provides detailed and in-depth documentation along with video tutorials for each of them with best practices. The documentation covers a wide range of topics, from basic setups to complex customizations, with a focus on practical implementation.

While Lumos has a smaller community compared to Client-First, it is dedicated and knowledgeable, offering support through forums and specialized groups.

Saddle Framework

Saddle also offers comprehensive documentation that covers all aspects of the framework, from getting-started guides to advanced customization techniques. The documentation is made to be a simple 1-pager to make it easy for anyone to learn the framework in a short amount of time.

In addition to the official documentation, Saddle offers video tutorials, examples and best practices to help you implement the framework efficiently. While the community around Saddle is not as large as some other frameworks right now, is growing fast.

‍

TL;DR: Client-First vs Lumos vs Saddle

If you just skimmed through the blog, here’s a quick summary of how Saddle, Client-First, and Lumos stack against each other on different metrics.

‍

Which framework should you use

Despite all frameworks being great, your needs and expertise will determine which framework will work best for you. Here’s a breakdown of which frameworks might work best for you based on your experience level -

Beginner and intermediate developers

If you are a beginner or intermediate developer, Client-First and Saddle are great choices for you.

Client-First’s intuitive design and descriptive class names make it easy to understand and manage, even for those new to Webflow.

Saddle is also beginner-friendly, offering a balance of simplicity and efficiency. The clear naming conventions and structured approach help beginners understand and maintain their projects, promoting good development practices from the start.

Advanced developers

Advanced users will benefit the most from Lumos and Saddle frameworks.

Lumos provides a high degree of control and customization. This makes it ideal for complex projects. However, mastering Lumos requires a solid understanding of Webflow and CSS, so experienced developers will be able to make the most out of it.

Saddle is also suitable for advanced users who appreciate its structured approach and efficient project management. The balance of simplicity and advanced features supports the implementation of complex designs while maintaining code quality.

Regardless of our suggestions, we encourage you to try out different frameworks for yourself to find the best one for you.