• Layout/

Getting Started

Layout is defined as the arrangement of predetermined elements, such as grid, spacing, display, and alignment on a page.

# Building Blocks

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:

  • Curate the information that is most important to the device or screen size
  • Ensure all users may interact and enjoy the content using the tools provided

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.

# Grid

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

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.

# Display

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.

# Alignment

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.