Layout

Layout provides foundational patterns for responsive pages.

v0.34.0AlphaNot reviewed for accessibility

Description

Layout provides foundational patterns for responsive pages. Layout can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. On smaller screens, Layout uses vertically stacked rows to display content.

Layout flows as both column, when there's enough horizontal space to render both Main and Sidebarside-by-side (on a desktop of tablet device, per instance); or it flows as a row, when Main and Sidebar are stacked vertically (e.g. on a mobile device). Layout should always work in any screen size.

Accessibility

Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether main or sidebar comes first in code. The code order won’t affect the visual position.

Arguments

NameTypeDefaultDescription
stacking_breakpoint
Symbol

:md

When the Layout should change from rows into columns. One of :lg, :md, or :sm.

first_in_source
Symbol

:sidebar

Which element to render first in the HTML. This will change the keyboard navigation order. One of :main or :sidebar.

gutter
Symbol

:default

The amount of space between the main section and the sidebar. One of :condensed, :default, :none, or :spacious.

system_arguments
Hash

N/A

Examples

Slots

main

The layout's main content.

NameTypeDefaultDescription
width
Symbol

N/A

One of :full, :lg, :md, or :xl.

system_arguments
Hash

N/A

The layout's sidebar.

NameTypeDefaultDescription
width
Symbol

N/A

One of :default, :narrow, or :wide.

col_placement
Symbol

N/A

Sidebar placement when Layout is in column modes. One of :end or :start.

row_placement
Symbol

N/A

Sidebar placement when Layout is in row mode. One of :end, :none, or :start.

system_arguments
Hash

N/A

Layout::Sidebar

The layout's sidebar content.

Layout::Main

The layout's main content.

Arguments

NameTypeDefaultDescription
width
Symbol

:full

One of :full, :lg, :md, or :xl.

system_arguments
Hash

N/A