The grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. With flexbox you have the power to simply add in the columns and rows required, and they'll evenly take up the available space of their parent layout container. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be.
Child elements of a layout container with the flex
attribute will "flex", or stretch, to fill the available area within its parent layout container.
If a design requires three evenly spaced elements, simply add three elements with a
flex
attribute. Elements without the flex attribute will take up their natural size,
whereas elements with the flex attribute will evenly fill in the available area.
This layout has padding, or gutters, between each cell by adding the
layout-padding
attribute. The previous examples added in their own
margins/padding manually, whereas the layout-padding attribute spaces it all out
evenly.
Flex attributes can be given integers to represent the percentage of the available space it should take up. Note that elements which are not given a percentage still fill up the available area. Adjust the window size to see the demo's responsive layout attributes at work.
Note that flex attributes are only defined in increments of 5, with the exception of
33 and 66. (ie. flex=5, flex=10, flex=15, ... flex=33, flex=35, ... flex=66, etc
)
This avoids needlessly including extra css in the framework. If you need more
specificity than what is provided by our breakpoints, use stylesheets to set the
flex-basis: x%; max-width: x%;
properties.
Elements can be offset from the left, but still allow the gutters to line up correctly. Adjust the window size to see the demo's responsive layout attributes at work.
Child elements of a layout container can have their order changed through the use of the
layout-order
attribute, and respective responsive
attributes such as: layout-order-sm, layout-order-md, and layout-order-lg. Reordering elements
is useful when the placement of a cell should be changed depending on the viewport size.
In the demo, notice how the default size (the smallest) has each of the elements in their natural order determined by its markup. However, as the viewport changes size then each individual cell can change their order using the layout-order attribute.
This layout lets each of the header and footer tracks height be the size of their respective content, and the middle track (menu and main) flex vertically to fill the space of the entire layout. This is also an example of nested layouts, where the entire body is a vertical layout (header/content/footer), and the content row is its own layout (menu/main), and each layout has their own settings.
The body element has the layout="column"
attribute.
By default the middle track has the menu and main elements stacked vertically. However,
the elements line up horizontally starting at the "small" size, which is determined by the
media query.