The structural classes spatially combine the elements defined through the basic and component classes to create the sections that will make up our pages.

Structural classes are organized in patterns where there is a parent element and multiple child elements.

The structural patterns, in turn, are grouped into schemes to create complex structures within our project.

Naming convention

| Main structural class:

Pattern name in square brackets [Section]
Secondary structural class:
Pattern name in square brackets plus child element identifier [Section] V Wrapper

Structural patterns included in The System

[Custom]

[Page]

[Section]

[Container]

[Grid]

Fundamental structural scheme

The patterns, in turn, are grouped into schemes. This is the fundamental scheme in which the patterns defined in the previous point are grouped. Here we can see their relationship in the DOM.

<aside> 💡 It is important to document the schemes defined in each project to be able to reuse them easily.

</aside>

FAQs