The base layout template provides a universal solution for the common scenario of a header, content area and sticky footer. A content area has one or more layout rows that support full bleed content. It is possible to create alternative templates.
The currently active template is set at the HTML element using the data-template attribute. This value corresponds to the template SCSS files in your templates build directory.
A layout row is a layout container where the outside of the container spans the entire width of the viewport, yet the inside of the container spans the maximum width of the content area, which is typically less than the viewport width. All page content should be placed within one or more layout rows.
By default, a layout row simply ensures that content is placed within the main content area, it has no other visual effect. However, in case the outside of the layout row is given a background color or image, a full bleed effect can be achieved:
By default, the inner content of a layout row will have the same outside spacing applied as the page level outside spacing. This ensures that all content on a page aligns to the same spacing. However, it is possible to disable padding on a layout row, to create an edge to edge container. The below demonstrations apply a background color to the inside of the layout row to show the difference: