Styleguide Navigation

Flex Grid

The Grid consists/children that are separated by a constant gutter (20px). Try to use SteadyGrid whenever possible.

Examples

  1. Standard Grid
  2. Vertical Space
    1. None: noGap
    2. Medium: emGap
    3. Large: gap
  3. Horizontal Space
    1. None: noGutter
    2. Small: default
    3. Medium: emGutter
    4. Large: gutter
  4. Alignment
    1. Default: left
    2. Center: center
    3. Right: right
  5. Understanding Device Breakpoints

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.)

⌛️ Loading Example ...

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
⌛️ Loading Example ...