The System is a method to work in a sustainable, scalable, and transferable way in Webflow.
It is intended to be used by advanced Webflow professionals.
If I'm not on the wrong track, I'm sure you already have a couple of questions going through your head. What differentiates The System from Client-first from Finsweet or Knockout from Edgar Allan? And with libraries like Relume or SystemFlow?
Before answering those questions, let me tell you I’m not here to say that The System is the best option to create your Webflow projects upon. That is something you need to decide. The foundational ideas that build The System are the ones that will tell you if it is the right system for you, or not.
That being said, let’s have a quick look to the main differences with these other Webflow methodologies.
Client-first focuses on the premise that end customers can use it. The System is created with a focus on advanced Webflow users. These two dissimilar premises mean that very different approaches are taken for the same problems.
Knockout relies heavily on utility classes, also known as functional classes. Although this is a validated and extended approach in the front-end world, it is difficult to maintain in the environment offered by Webflow due to the platform's own peculiarities. Utility classes are also used by The System, but in support of other types of main classes.
Another important point about Knockout is that its 14 column grid is not intended to be modified. In The System the grid is easily adaptable, both in the number of columns and the space between them.
Unlike the latter, Relume, SystemFlow, and some other library systems are based on being component collections. These systems allow for great speed in the build, but lose customization capacity. The predefined blocks make different websites have an underlying resemblance.
It is for this same reason that The System does not include components by default. What it does provide is guidance on how to create the components and the classes to style them.
The System incorporates innovative aspects compared to other systems when working on Webflow. But there is one in particular that stands out from the rest and that defines the operation of this system. This aspect is class classification.
Classes and the way styles are applied represent the aspect of Webflow development that adds the most cognitive load to our work process. For this reason, the purpose of The System is to reduce this cognitive load thanks to the classification of classes according to their function. Not only a classification at the conceptual level, but it is represented with different naming conventions for each of the types within this classification.
Siguiente
<aside> ➡️ 4 class types
</aside>