Creating Layouts

When constructing layouts in both design and development design system components and patterns are central to the process.

Foundations and Tokens

Design system components and patterns are consumers of defined foundations and tokens, avoid deviating from these established assets.

Layout Components

Layout components are primitive components that define the structures used to house content and functionality, they are responsive and adaptable to the end user layouts.

Cluster and Grid Components

Always start with Cluster and Grid components before considering the more advanced custom components of ClusterLayout and GridLayout. Cluster and Grid ensure all content and functionality is provided to end users no matter their medium - all children containers wrap to fit the viewport with no loss of content occurring.

Box Component

Layout components are not intended to control the visibility of their components with the one exception - that is the Box component. The Box component can set the CSS display property at any breakpoint which makes it a key use case for the Box component.

The Box component can be used in a utility sense for various content needs.

Encapsulation

Margins are not used on components with the exception of stack components, encapsulation is a design system principle we apply to ensure components only control the content and functionality within them.

Stack Components

The Stack and ContentStack components are the only components to utilise margins and they do so to their child elements thereby maintaining our encapsulation rule. As such the Stack and ContentStack components control the vertical rhythm of their child content by applying appropriate spacing per content type.

Layout Order

Start with:

1. Main content container.
2. Stack or Content Stack.
3. H1 primary heading.
4. Layout components to craft a specific layout structure.
5. Content or Form components or a pattern.

Stack components can also be nested when necessary.