Template Structure Overview
When building templates and themes, CDS has a number of built in container classes which can be used to create page templates.
In CDS, the structure of a page layout is organized into six distinct levels. Not all levels are mandatory for displaying content or components correctly. Documentation will refer to these layers by their specific names.
The hierarchy of the structure is as follows, with detailed instructions on how to modify each level available on their respective pages.
To implement these structures in your code, you will use specific CSS classes (detailed on their respective pages) applied to the appropriate HTML container elements, typically <div> tags.
- Band - Represents full-width page landmarks such as banners, main content areas, and footers.
- Region - Full-width sections that can have different background colors.
- Container - Optional element that defines a maximum width for the content.
- Layout - Defines columns, useful for sidebars, cards, and otherwise splitting content.
- Section - A universal container for blocks and content, required within layouts to position the content.
- Block and Content - Contains all reusable blocks and components, which should be nested within a section.
Breakpoints
While you are free to create your own breakpoints as needed for elements, there are standard ones built into CDS that are commonly used. Do note that these do not have any Sass variables or mixin support as of now.
| Viewport | min-width | max-width |
|---|---|---|
| Small Mobile | 0 | 479 |
| Mobile | 480 | 767 |
| Small Tablet | 768 | 959 |
| Tablet | 960 | 1023 |
| Small Desktop | 1024 | 1199 |
| Desktop | 1200 | 1439 |
| Large Desktop | 1440 | n/a |
When implementing breakpoints, CDS utilizes both @media (max-width) and @media (min-width) queries. For a cleaner and more maintainable codebase, it is recommended to choose one approach (either mobile-first or desktop-first) and consistently apply it throughout your child themes. This practice helps to minimize potential inconsistencies and issues.
CSS Properties
Refer to the table below as a reference of where layout CSS properties are defined.
| Property | Structural Component |
|---|---|
background-* |
Band or Region |
flex-direction |
Layout |
flex-flow |
Layout |
flex-wrap |
Layout |
gap |
Layout |
justify-content |
Layout |
margin-left, margin-right |
Container (for centering the content) |
padding-top, padding-bottom |
Band or Region |
padding-left, padding-right |
Container |