Saddle vs Client-First – What are the differences?

We've recently launched Saddle, a new Webflow framework for developers. The big updates at the last Webflow Conf really got us thinking we need a new system. It's a framework that's built with a developer-first mindset, but with the client in mind. How does that work and how is it different from Client-First? Saddle up and let's find out!

Disclamer

Before we start, I want to make it clear that I'm not trying to bash Client-First. It's obviously a great style system that has been working great for many people. Otherwise it wouldn't be so popular. I'm just trying to explain the differences between the two frameworks and why we've decided to build Saddle. Creative Mules has been using Client-First for a long time and we've learned a lot from it. With that in mind, let's get started!

For developers vs for everyone

We decided to build Saddle because we wanted to build a framework that's easier to use for developers. In all our years of building on Webflow, clients rarely asked for access to the Designer. They just wanted to be able to edit the content on their website, and if there are any design changes, they just send us a message. In fact, even Finsweet mention in the Client-First documentation:

"Not all clients want to manage their Webflow project. Some do, and most don't."

Apart from that, for most agencies, Webflow has become a development tool. They have a designer that designs the website, and a developer that builds it. So why not build a framework that's easier to use for developers?

Client Focused vs Client-First

Client-First's goal is to make it easier for everyone to understand a Webflow project. And they do that very well with clear, descriptive naming, a lot of utility classes, and good documentation. Its popularity makes it a no-brainer for many to use it, from beginners to advanced users. Saddle's client-focused approach is a bit different. Its goal is to make it more enjoyable for developers to build on Webflow, while still making it easy for clients to manage their website. It encourages developers to use less divs, be more consistent, and be more strict with their naming. But it also encourages developers to use components, templates, and attributes to make it easier for clients to manage their website.

Naming

Classes

Client-First uses a very descriptive naming system so that everyone can understand what a class does. For example, the class "background-color-black" is very descriptive and easy to understand. Saddle uses a "developer language" for most of its classes, borrowing a lot from Tailwind CSS. Things like "heading-style-h1" become "h1". While Saddle uses some abbreviations, we were very careful to discourage ones that are too cryptic. In fact these are all the abbreviations used:

• xs, sm, md, lg, xl = extra small, small, medium, large, extra large
• bg = background
• u = utility
• cc = combo class

Global and combo classes

Adding utility classes when using Client-First is as simple as adding any other class. You can add a padding class to anything, or use it on its own. Saddle uses a different approach.

Utility classes have a "u" prefix and can be added to anything, but they're not meant to be used on their own. In most cases, you shouldn't need to wrap an element with an extra div just to add a utility class.

Combo classes are element-specific classes. In Client-First their prefix is "is". In Saddle, we prefer using "cc" and they only exist as a combo class for a specific element. This way a "cc-first" class for one element can be different from a "cc-first" class for another element. Any class that doesn't have a "u" or "cc" prefix is not supposed to be used as a combo class.

Colors

Saddle also has a color naming which system utilizes Webflow's new variables and allows you to use the same utility classes across projects. It works by describing the color's use instead of the color itself. For example, “Color Surface“ is used for the main background color. “Color Text” is used for the main text color. “Color Accent” is used for the main accent color.With this approach you get:

1. Familiarity - It's easier to remember what a color is used for than what it looks like.
2. Consistency - It makes it easier to change the color of an element without having to change the class name.
3. Theming - It makes it easier to create a dark mode by just changing the color variables.

Which one should you use?

If you're just starting out, you may be better off learning Client-First as it will help you get a job easier and it has a strong community already. If you're an experienced developer, you will feel right at home with Saddle. The naming system and the developer-focused approach will make it easier for you to build on Webflow. At the time of writing this article Finsweet is working on a new version of Client-First, so it's possible that some of the things mentioned here will change.