Responsive Layout

From the ground up the layout system is built around being responsive to viewport size. Out of the box it comes with useful and customizable breakpoints, which can be easily reused. The layout attribute used with "horizontal" or "vertical" values define arrangement on all device sizes. If you wish to define a layout depending upon the device size, there are other layout attributes available:



Layout Options

layout-padding adds padding between this layout's children with the flex attribute.

I'm on the left, and there's an empty area between.
I'm on the right, and there's an empty area between.

layout-fill forces the layout element to fill its parent container.

This layout fills up 100% of its parent's width and height.


Utility Attributes

block display: block
block-sm display: block when the small media query is active.
block-md display: block when the medium media query is active.
block-lg display: block when the large media query is active.
inline-block display: inline-block
inline-block-sm display: inline-block when the small media query is active.
inline-block-md display: inline-block when the medium media query is active.
inline-block-lg display: inline-block when the large media query is active.
hide display: none
hide-sm display: none when the small media query is active.
hide-md display: none when the medium media query is active.
hide-lg display: none when the large media query is active.