Creating Layouts
Page layouts are created using a combination of SWAN components.
- Use Page Wrapper components to set up the boilerplate for your page
- Use Bounded Content to set a maximum width and outer padding for page content.
- Use Grid components to structure page content layouts.
- Use Responsive System to tailor the layout for specific screen sizes.
- Use Space for more granular layout decisions and vertical spacing
BoundedContent and Grid are not suitable for pages with floating menus such as Studio.
SWAN is responsible for everything in between the header and footer navs (i.e. ‘page content’), which are controlled by Bookends.
Setting up the DOM
The base level of a page requires certain components to best set up SWAN and provide an accessible base.
Refer to Page Wrappers for more information.
Bounded Content
Use Bounded Content to set a maximum width and outer padding for page content. This is important for maintaining consistent content alignment between pages.
If required, Ubik fragments can be exported wrapped inside of a BoundedContent.
Refer to Bounded Content for more information.
Grid
Grid is based on an invisible 12-segment structure. It consists of three components that must be used in the sequence of Grid Container > Row > Column. Grid Containers can contain multiple Rows. Rows can contain multiple Columns.
Grid should be used inside Bounded Content for proper alignment.
Users define the amount of Columns and how each span across the 12 segments. Columns will wrap within a Row when there is not enough space to fit them.
Refer to Grid for more information.
Responsive System
SWAN has a mobile-first responsive system with five breakpoints: xs sm md lg and xl. Typography, tokens, and most components have responsiveness built in. Users can add additional bespoke responsive styling as necessary.
Refer to Responsive System for more information.
Space
For granular layout decisions and vertical spacing, use components such as Box and FlexBox to layout your content. These are largely powered by our Space tokens, which keeps consistency across pages and helps create a clean, uncluttered interface.
