The Template is the practical representation of The System as a Webflow project. It serves as the starting point to building your site using this approach.

In The Template, you find the following pages

• Style guide
• Basic classes
• Component classes
• Structural classes
• Functional classes

Every page here corresponds to each of the 4 class types. Plus a Styleguide page built upon the basic, structural, and functional classes (remember that The System does not include Component classes).

How to use The Template

1. Go to the Stylguide and update the styles accordingly to your designs. The updates done here will replicate in the other The System’s foundational pages.
2. In the basic elements add any basic element you are missing, if any. We suggest adding any new basic elements to the style guide page as well.
3. Start creating your components in the component page.
4. If needed, you can update the scales that nurture the dimensional modules: Heading, Font Size, Padding, Vertical, and Horizontal.

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