In Forward Slash we divide classes into four types according to their function:

Basic classes

Component classes

Structural classes

Functional classes

<aside> 💡 All classes used in Forward Slash must belong to one, and only one, of these four class types.

</aside>

Lego and classes

Let's take a look at the Lego bricks to understand the classification of classes in The System.

1. When playing with Legos, we have the pieces, which are indivisible and each one has its own characteristics: color, size, decoration, etc.
2. The pieces are combined to create more or less complex constructions. Let us now imagine that we want to exhibit our creations.
3. We need a structure or shelf that allows us to display each of our pieces in an orderly manner.

Let us now extrapolate this idea from Lego to class classification in The System.

1. There are the basic elements of any project that represent each of the pieces in the Lego example. Some of these inherently global elements are button, link, input, and label. The classes that are used to style these elements are called Basic classes.
2. The basic elements are grouped into complex groups that we call components. What in the Lego example are the constructions created from the union of the different pieces. The classes that constitute these components are called Component classes.
3. Finally, we group components and basic elements in an orderly manner to efficiently transmit information. In a similar way, we use a structure or shelf to display our creations with Lego. The classes that allow us to organize our components and basic elements are called Structural classes.

Let's see in detail the characteristics of each of these types of classes.

Content and Container

Another way to delve into this classification of classes in The System is to think in terms of content and container, on which the basic and component classes serve to create the content and the structural classes are the container of said content.

A good example of content and container is that of a newly built house that is for sale. When we go to visit it, what we see is the container. The furniture and belongings with which we will fill the spaces, the content.

Systematization by sets of values

Functional classes represent the “+1” in our class ranking.

As its name suggests, The System seeks to systematize our work in Webflow. That is why scales and value systems take on great relevance. This is how the fourth type of classification is born, the Functional classes.

Functional classes are sets of classes on which the scales and value systems, that are fundamental to our project, take shape.

A set of functional classes are called modules. Where each of the classes within a module offers a different value for the same behavior. The clearest example of a functional module is that of vertical spacing, for which each class within this module defines a different vertical space between elements.

As a consequence of systematizing the values we use, functional classes act as support classes, giving us a set of tools (classes) to create recursive styles without creating duplication of CSS instructions.

Index

• Forward Slash
  1. What is Forward Slash?
  2. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Color
        5. Bg
        6. Heading
        7. Font Size
        8. Font Style
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
  3. Class combination
     1. Combo-classes
     2. Multi-classes
  4. Grid
  5. Gap
  6. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  7. What’s New?

Prev

<aside> ⬅️ Forward Slash

</aside>

Next

<aside> ➡️ Basic classes

</aside>