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
sets the default layout on all devices.
layout-phone
sets the layout on device <600px wide.
layout-tablet
sets the layout on devices >=600px and <960px wide.
layout-tablet-landscape
sets the layout on devices >=960px and <1200px wide.
layout-pc
sets the layout on devices >=1200px wide.
layout-padding
adds padding between this layout's children with
the flex
attribute.
layout-fill
forces the layout element to fill its parent container.
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. |