FAQs
What is S2 — a theme, a template, a style guide, or a UI kit?
S2 is a framework. It is not a theme or template.
The S2 Framework is a complete system for building scalable, maintainable, and professional Webflow sites. It provides a standardized approach to naming and organizing CSS classes and other elements.
During your design process, you should modify the S2 Framework cloneable and use it as the style guide for your site.
You can use the S2 cloneable as a starting point for your project. Since we avoid over-styling, the layouts remain simple and adaptable, giving you complete creative freedom. Feel free to modify anything as you build.
The S2 Framework is not a UI kit — but, it does include some well-structured basic UI elements that you can further style to fit your needs. Additionally, S2 provides a small collection of well-structured base layouts and components, helping you build faster and more efficiently.
I am using an older version of S2, how to upgrade?
If you've started a project with a specific version of the S2 Framework, it’s best to continue using that version. Upgrading can be difficult and is often unnecessary, especially if you've already modified it.
So, it is perfectly fine to continue using the version you are starting with.
However, if you find something new in a new version of S2 that is not available in your current version, you can easily copy it from a freshly cloned copy.
Is there any conflict between the S2 Framework and Client-First conventions?
No. There is no conflict between the S2 and the Client-First conventions (or any other naming conventions).
There are differences, for example, S2 uses prefixes like cc- and u-, and we also 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 the two 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 custom codes is on each page and is very small in size. It has a very minimal and insignificant impact on your site compared with other aspects.
What if my project is not going to have light and dark colors.
No problem. You can remove the feature easily:
Remove the Dark mode variables.
Remove the related scripts from the project's global head code.
Remove the related UI elements (optional).
My design or my default theme is dark. What should I do?
Option 1:
If you want to keep S2's default mode-switching feature, you can add an attribute theme-default="dark" to a page's Body tag. Then, enable Webflow Designer to display pages in dark mode by one of the following methods:
Change the "Colors" under "Variable mode" for the
bodyclass or theBodytag to "Dark mode".Add the utility class
u-dark-modeto thebodyclass.
Option 2:
If your site is dark and you don't need mode-switching, you can manually update the Base mode colors under the "Colors" variables. Then, remove the pre-built Dark mode entirely.
Components? S2 Components? What are they?
S2 Components are not components; at least, they are not components yet. We just name them this way.
Besides, S2 is a framework by nature. This approach ensures it remains simple and flexible, allowing you to effortlessly remove anything unnecessary.
Is using the S2 framework compatible with resources that are using other frameworks, especially Client-First?
Yes, there won't be any conflict when you add or copy and paste components, layouts, scripts and community stuff that use other practices or frameworks into a site built with S2.
In fact, the main difference is in class naming conventions. You can leave the class names of such elements as they are, or rename them according to S2's conventions.
There are things I do not need for my website. Can I remove them?
Yes, absolutely.
While you can remove unnecessary stuff from the cloned S2 framework (and clean up styles and interactions unused) at any time, we generally recommend that you do this after you have completed most of your site-building process. It is always handy to have them around.
Besides, keeping them in the styles guild has very very very minimal impact on your site's performance.
Last updated