Functional classes define a single behavior, typically by modifying a single CSS property.

The functional classes have two purposes, where the second is a consequence of the first.

1. Provide coherence and solidity using scales and value systems throughout our project.
2. Support the creation of recurring styles and avoid duplicating CSS instructions.

Functional classes are grouped into modules. Where each class within the same module modifies the same property but with a different value.

Naming convention

The name of functional classes is formed with the name of the module to which they belong plus the value associated with the class in question.

Modules included in The System

Vertical

Horizontal

Padding

Color

Bg

Heading

Font Size

Font Weight

Font Style

Line Height

Align

Position

Display

Images

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> ⬅️ Component classes

</aside>

Next

<aside> ➡️ [Custom]

</aside>