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 "row" or "column" 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

hide display: none
hide-phone display: none when the phone media query is active.
hide-tablet display: none when the tablet media query is active.
hide-tablet-landscape display: none when the tablet-landscape media query is active.
hide-pc display: none when the pc media query is active.
show negates hide operator
show-phone negates hide operator when the phone media query is active.
show-tablet negates hide operator when the tablet media query is active.
show-tablet-landscape negates hide operator when the tablet-landscape media query is active.
show-pc negates hide operator when the pc media query is active.