Layout

Layout provides foundational patterns for responsive pages.

v0.24.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

NameDefaultDescription
stacking_breakpoint

:md

Symbol

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

first_in_source

:sidebar

Symbol

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

gutter

:default

Symbol

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

system_arguments

N/A

Hash

Examples

Slots

main

The layout's main content.

NameDefaultDescription
width

N/A

Symbol

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

system_arguments

N/A

Hash

The layout's sidebar.

NameDefaultDescription
width

N/A

Symbol

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

col_placement

N/A

Symbol

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

row_placement

N/A

Symbol

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

system_arguments

N/A

Hash

Layout::Sidebar

The layout's sidebar content.

Layout::Main

The layout's main content.

Arguments

NameDefaultDescription
width

:full

Symbol

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

system_arguments

N/A

Hash