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

Color

Line Height

Ratio

Horizontal

Font Size

Align

Font Style

Padding

Font

Position

Heading

Bg

Display

Prev

<aside> ⬅️ Component classes

</aside>

Next

<aside> ➡️ [Custom]

</aside>

Index

• The System
  1. 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. Heading
        5. Color
        6. Font Size
        7. Font Style
        8. Font
        9. Bg
        10. Line Height
        11. Align
        12. Position
        13. Display
        14. Ratio
  2. Class combination
     1. Combo-classes
     2. Muti-classes
  3. 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
  4. Grid
  5. Gap