From Lumos

Switching from Lumos Framework to the S2 Framework

The Lumos Framework is very, umm… advanced.

About Grid

Lumos embraces grid systems, and sometimes relying on custom code and custom properties to set up the grid structure. You may also need to understand concepts like subgrid to fully utilize it. While powerful, this approach can be fragile and difficult for your team and collaborators to follow.

S2 recommends using Webflow Designer to set up grids rather than relying on custom code whenever possible. This ensures a more intuitive and maintainable workflow, making collaboration much easier.

That said, some Grid Utility classes (a simplified and slightly modified version) have been adopted in S2. These are suitable for those who are already familiar with it.

Class Naming Convention

Lumos uses is- as a prefix for combo classes and u- for utility classes.

In S2, we use cc- for combo classes to have better search results in the panel and make them visually easier to identify. Utility classes u- remain the same as in Lumos.

Lumos has a comprehensive but complex class naming system with specific rules for different usages, which can be difficult to remember and apply consistently.

S2 keeps it simple:

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.

Refer to the Class Naming section for more examples.

Flexbox

S2 adopted the u-hflex-, u-vflex-, and u-flex- from Lumos. They are well designed utilities.

However, in S2, Flex Utilities are kept simple and are not linked to variables.

We also do not include u-alignment- utilities, as we believe, in reality, alignments can be handled through a simple combo class, allowing all other styling to be managed within that class.

To be honest, Flex configurations in Webflow are already quick and easy. The main reason for including Flex Utilities in S2 is to eliminate the need to constantly think of new class names.

Mindset

A Webflow project is often handled by multiple stakeholders, including teammates, collaborators, partners, clients, and even their colleagues. Not everyone involved will have deep knowledge of frameworks or technical details.

S2 is designed to reduce friction in collaboration for all levels: no-code, low-code, or know-code. While custom code is valuable for advanced designs and backend functions, basic layouts should be built with low-code or no-code whenever possible.

Besides, Lumos often focuses on minimizing extra lines of CSS generated by Webflow. However, the actual performance impact is in fact very, very, and very, very small compared to other factors.

In S2, we encourage you to create classes as needed. Webflow is a flexible and powerful tool, and you should make the most of it.