Frontend Prototype
Standard Grid
The Grid consists/column children that are separated by a gap (gutter: 20px). (The «l-gap» class add a gutter margin to its children when applied to the «l-FlexGrid» class.)
Flex Grid
The Grid consists/children that are separated by a constant gutter (20px). Try to use SteadyGrid whenever possible.
Vertical Space
None: noGap
Medium: emGap
Large: gap
Horizontal Space
None: noGutter
Small: default
Medium: emGutter
Large: gutter
Alignment
Default: left
Center: center
Right: right
Understanding Device Breakpoints
We've defined a few simple breakpoints, which you can use in conjunction with the layout classes. The define at which point a column should take a different width percentage.
- Empty = Desktop
- Tablet (Landscape)
- Tablet-Portrait
- Mobile (Landscape)
- Mobile-Portrait