Layout is defined as the arrangement of predetermined elements, such as grid, spacing, display, and alignment on a page.
We know that everyone's needs are unique and that every application won't be built in the same way. We allow total flexibility to define what and where you want to consume the Cedar Design System. To that end, think of Cedar as a toolbox rather than as a framework.
Cedar provides layout that enables you to:
Articles included in the Layout section outlines the foundational tools available through Cedar tokens, utilities, and components. We will also provide working examples which outline expected implementations.
The grid is the foundation for layout and requires being nested in a container. Grids enable a visual consistency and hierarchy that helps support your composition. In other words, grids help you to manage the proportions between UI elements, such as spacing and margins.
Grids bring order to a layout making it easier for visitors to find and navigate through content. Grids also provide separation between unique sets of content, like a product image and a product buy box. Grids should not be used for related content layout, like title and abstract.
A 12-column grid is standard in design and development because the number 12 is easily divisible in various ways and can help create even or uneven vertical columns.
For more information on grid, visit the Grid Component page.
To learn about the Cedar container and display breakpoints, visit the Responsive Layout page.
Spacing is used in conjunction with the grid. While the grid is the foundation for layout, the spacing is the building block to arrange content. Grids apply spacing allowing layouts.
Spacing is made up of margin and padding. Spacing in Cedar is a defined set of values that creates consistency.
For more information on spacing and space utility classes, visit the Spacing Layout page.
The display classes are used to either show or hide content. You can customize your display needs to fit your screen size by adding the appropriate breakpoint name.
To learn about how to show or hide content, visit the Display Layout page.
Text and container alignment utility classes allow you to shift your content or customize content container's horizontal alignment.
For more information on alignment utility classes, visit the Alignment Layout page.