Frameworks Comparison Overview
Last updated
Last updated
This page breaks down the key differences and similarities between S2, Client-First, MAST, and the Saddle Framework — helping you decide if switching makes sense for you.
Brief descriptions of some major frameworks:
S2 Framework
S2 emphasizes a simple and easy-to-understand structure. There’s no need to over-prepare or create overly complex structures. Avoid unnecessary nesting and excessive div wrapping.
When building S2 Framework, we strictly follow our rules when building with S2. However, we encourage you to take advantage of the flexibility of Webflow when building your site.
Client-First
It looks like Client-First does not usually call itself a framework but a "guideline". Client-First suggests stricter adherence to rules to ensure consistency across projects.
CF often results in deeply nested structures, partly due to the CSS “folder” concept they invented and partly as an early preparation for “flexibility.”
MAST
MAST shares a similar mindset with S2 — leveraging the power and flexibility of Webflow.
The Saddle Framework
Not much was mentioned, but it should be close to MAST.
S2 Framework
S2 is designed to be easy to start for anyone, and flexible for pros and developers. Our guidelines are brief and easy to understand.
By leveraging Webflow, we want anyone to be able to start using S2 effectively within a few hours of learning and hands-on exploration. For experienced users, you can dive deeper and use the framework fluently with custom code.
Client-First
Client-First generally requires more memorization, especially for utility classes, leading to frequent cross-referencing with the Style Guide. Combined with other guidelines, this results in a steeper learning curve based on our experience.
MAST & The Saddle Framework
They are both easy, but MAST seemingly has more utility classes to look at.
S2 Framework
S2 has a clear and simple class naming convention. We use cc- for combo classes and u- for utility classes. Additionally, we follow a straightforward strategy for when to use - and _.
S2 also includes a small set of abbreviations.
Client-First
Client-first uses is- for combo classes. While this is entirely fine, it can make filtering combo classes in searches slightly difficult as is is common in many class names. For utility classes, Client-First does not use a prefix, which can become very confusing over time.
The use of - and _ in Client-First is somewhat ambiguous. Its "folder" concept has to rely on Finsweet’s Chrome extension for visualization.
Client-First also uses full words for everything, even for some frequently used terms, leading to longer class names. This result is also partly due to the folder concept, which adds extra design complexity and increases the burden on designers, making it harder to follow.
MAST & The Saddle Framework
All frameworks are generally similar for other naming conventions, such as variables, components, and interactions. The differences are not a significant concern.
S2 Framework
S2 includes a set of well-designed utility classes. To guide styling decisions, S2 provides a simple hierarchy for making better styling choices:
Classes in Framework → Your Custom Classes → S2 Attributes (optional) → Utility Classes
Client-First
Client-First advocates the power of utility classes. However, this can lead to issues such as:
- Potential confusion due to missing a u- prefix to distinguish utility classes.
- Stacking utility classes incorrectly.
- Root utility classes being unintentionally styled or removed.
For example, you don't need a utility class position-absolute to apply the style position: absolute. We avoid creating utility classes that are too simple that you should style directly.
MAST & The Saddle Framework
No specific guidelines are provided. The Saddle Framework has a much simpler set of utility classes.
While require some memorization, they are entirely optional. Use only the ones you can easily remember and understand. Since the S2 Attributes library is small, you can become proficient quickly.
Example: hero-banner_inner-wrapper
1. Use natural English in most cases.
2. Use - to separate words of the same context.
3. Use _ to separate words of different contexts or child elements.
It's that simple! See the section.
References:
The class naming strategies of S2 evolved from them. So, we basically share the same philosophy. In S2, we define the use of - and _ more clearly (), and abbreviations in S2 are also a bit different.
S2 suggests and encourages you to style by creating your own custom classes and leveraging .