class Primer::Alpha::Layout
‘main` or `sidebar` comes first in code. The code order won’t affect the visual position.
Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
@accessibility
`Layout` should always work in any screen size.
or it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).
`Layout` flows as both column, when there’s enough horizontal space to render both ‘Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);
On smaller screens, `Layout` uses vertically stacked rows to display content.
`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.
`Layout` provides foundational patterns for responsive pages.
def initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments)
-
system_arguments
(Hash
) -- <%= link_to_system_arguments_docs %> -
gutter
(Symbol
) -- The amount of space between the main section and the sidebar. <%= one_of(Primer::Alpha::Layout::GUTTER_OPTIONS) %> -
first_in_source
(Symbol
) -- Which element to render first in the HTML. This will change the keyboard navigation order. <%= one_of(Primer::Alpha::Layout::FIRST_IN_SOURCE_OPTIONS) %> -
stacking_breakpoint
(Symbol
) -- When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
def initialize(stacking_breakpoint: STACKING_BREAKPOINT_DEFAULT, first_in_source: FIRST_IN_SOURCE_DEFAULT, gutter: :default, **system_arguments) @first_in_source = fetch_or_fallback(FIRST_IN_SOURCE_OPTIONS, first_in_source, FIRST_IN_SOURCE_OPTIONS) @system_arguments = system_arguments @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( "Layout", STACKING_BREAKPOINT_MAPPINGS[fetch_or_fallback(STACKING_BREAKPOINT_OPTIONS, stacking_breakpoint, STACKING_BREAKPOINT_DEFAULT)], GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter, GUTTER_DEFAULT)], system_arguments[:classes] ) end
def render?
def render? main? && sidebar? end