Las functional classes definen un único comportamiento, por lo general modificando una sola propiedad CSS.

Las functional classes tienen dos objetivos, donde el segundo es una consecuencia del primero.

1. Dar coherencia y solidez utilizando escalas y sistemas de valores a largo de todo nuestro proyecto.
2. Dar apoyo en la creación de estilos recurrentes y no caer en la duplicidad de instrucciones CSS.

Las clases funcionales se agrupan en módulos. Dónde cada clase dentro de un mismo módulo modifica la misma propiedad pero con distinto valor.

Nomenclatura

El nombre de clases funcionales se forma con el nombre del módulo al que pertenecen más el valor asociado a la clase en cuestión.

Módulos incluidos en The System

Vertical

Color

Line Height

Ratio

Horizontal

Font Size

Align

Font Style

Padding

Font

Position

Heading

Bg

Display

Index

• The System
  1. Clasificación de clases
     1. Clases básicas
     2. Clases constituyentes
     3. Clases estructurales
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Clases funcionales
        1. Vertical
        2. Horizontal
        3. Padding
        4. Heading
        5. Color
        6. Font Size
        7. Family
        8. Bg
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
        14. Font Styles
  2. Combinación de clases
     1. Combo-classes
     2. Muti-classes
  3. Escalas fundamentales
     1. Escala fundamental de titulares
     2. Escala fundamental de titulares en el Rich Text
     3. Escala fundamental de cuerpo de texto
     4. Escala fundamental de espaciado
  4. Grid
  5. Gap