Our Approaches
The S2 Framework was originally based on the Saddle Framework, which explains some similarities between the two. As S2 evolves, it also references Tailwind CSS in different ways. In fact, the Saddle Framework is also inspired by Tailwind CSS, Client-First, MAST, and others.
So, continue reading if you are interested... 🙈
Concepts
Influence of Tailwind CSS
Tailwind CSS is an excellent CSS framework. It influenced how we name classes and attributes, making them more streamlined and flexible.
Tailwind’s core philosophy is utility-first classes. However, the way that utility classes stack is not practical in Webflow. Extensive use of utility classes and deep stacking are generally discouraged in Webflow. Besides, Webflow also generates specific styles for each combo class.
Just to be clear again, we don’t see Webflow as the place that can fully utilize utility classes, let alone stack them. In S2, we’ve got S2 Attributes, which work similarly but in the form of utility attributes. S2 Attributes are a set of pre-styled attributes, not classes.
About S2 Attributes
Attributes in S2 provide a convenient way to apply styles. S2 Attributes are carefully crafted and standardized. They are like utility attributes or tokens.
This feature is particularly useful for adding simple styles to elements without having to create new classes or combo classes, keeping your site lightweight and manageable.
We will dive deeper and may further simplify our attributes in the future.
Considerations and Approaches
Before we dive in, let’s get familiar with some terminology. For an extended take, check out this blog by Tailwind’s creator.
Structurally:
Content-specific classes: e.g.
post-intro-infoandauthor-bio.Content-agnostic classes: e.g.
card, which are less content-specific
About CSS classes design:
Component-first approach
Utility-first approach (extended reading: a blog by Tailwind's creator)
S2 strikes a balance between the above approaches.
When building S2, we tend to be more Content-agnostic. But we encourage you to create purposeful Content-specific classes wisely when designing your project. As a framework, we are certainly more Utility-first in different aspects; but in your projects, you have the freedom to take a component-first approach when styling specific parts of your site and enjoy the flexibility of Webflow.
Other considerations:
Searchability and Flexibility
In S2, classes are specifically designed to be clear and easily searchable, yet flexible enough to encourage reusability. Designed to be straightforward and user-friendly, S2 reduces the need for extensive memorization, making it accessible to users of all skill levels.
S2 as a Framework
S2 is a framework designed to make it easy for anyone to build websites using best practices.
We want to empower everyone to build faster, better, and smarter.
S2 includes some layout templates that you can use right away, but these templates are separate from the core framework. We do not want to impose a strong style or design on the framework.
Also, speaking of components and the recently released component slots feature, we do not want to create too many components that are difficult to edit and remove. Instead, we encourage you to turn the parts you find useful into components yourself.
As a result, S2 is a combination of:
Naming convention
Fine-tuned basic elements + Content-agnostic classes & combo classes
Utility classes (S2 keeps some truly useful utility classes only)
Attributes
In addition, S2 includes some styled UI and layout components that serve as starter templates and usage examples, helping you to work even faster!
Easy of Use
The S2 Framework aims to remove complexity. We want to make the S2 Framework accessible to anyone with basic HTML and CSS skills through a simpler and more user-friendly approach.
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 with custom code more smoothly throughout your project.
What do we try to avoid when building S2?
Long class names
Excessive stacking of classes
Deeply nested HTML structures
Custom code in property and attribute values
Over-styling of elements
Strong style directives
Utility classes that are difficult to understand or hard to remember
Utility classes that are too simple that you should style directly
Anything that requires extensive memorization
Difficult to remove unnecessary parts
Webflow is flexible and powerful
Webflow is a robust platform known for its flexibility and ease of use. We do not want the amount of hidden knowledge average people have to put into defeating Webflow's simplicity and flexibility.
S2 does not enforce rigid and complex rules. As the framework developer, we prioritize structural simplicity and perfect class naming. However, for you, the focus should be on creating perfect web pages.
We encourage everyone to be creative without restrictions. Let nothing slow you down.
Usage beyond Webflow
Although S2 is optimized for Webflow, it is essentially simple CSS combined with nice base styles from Webflow. For those who are already familiar with S2, it is also perfect for creating custom websites and applications. Just clone, export, and you're ready to go.
Last updated