FAQs
Is S2 a theme or template?
S2 is not a theme — it's a framework. You can use the S2 cloneable as a starting template, but it doesn't come with any fancy styling or design that might limit your creativity. Feel free to modify anything as you build. (You may have seen that many Bootstrap-based projects end up looking very similar, with traces of obvious visual patterns.)
The S2 framework is highly flexible. We avoid over-styling and keep layouts simple, so anyone can easily customize and use them without friction.
S2 also provides a small collection of well-designed base layouts and components to help you build faster.
I am using an older version of S2, how to update?
Once you start a project with one version of the S2 Framework, you should continue to use that version for a project.
The reason is that it can be very difficult to upgrade, and it is also unnecessary. Also, custom codes may have already been modified. It is perfectly fine to continue using the version you are starting with.
Is there any conflict between the S2 Framework and Client-First conventions?
There are differences, but there is no conflict between the S2 and the Client-First conventions.
For example, S2 uses prefixes like cc- and u-, and use a few abbreviations, but it causes no conflicts. You can easily update style names when you bring something that follows the Client-First conventions into an S2 project.
The differences between both approaches are more about what works well and what works even better.
What is S2 Attributes?
S2 Attributes is a concise, ready-to-use collection of attributes designed to streamline your development process.
Inspired by Tailwind CSS's utility-first approach, S2 Attributes offers a similar concept — but uses attributes instead of classes — to keep your HTML clean and organized.
S2 Attributes is designed to keep your project classes clean and organized. It also gives you flexibility and helps you build faster. Using it is completely optional.
Does S2 Attributes cause any performance issues?
No. The set of codes is on each page and is super small in size.
How to find which elements a variable is applied to?
Unfortunately, you cannot check this directly in the Webflow Designer panel. However, you can find where variables are applied by following these steps:
First, go to the source code of any page. Find and visit the current stylesheet (the .css file). Then, you can search for the variable names, such as var(--colors--text).
Last updated