m.layout

Used to lay elements out to align with the grid. If elements need to sit next to each other, they should be wrapped in layout classes. This is probably THE most core component in the kit.

Block

.layout

Applies a negative margin the size of the grid gutter and resets for the list items.

Elements

    • .layout__item

    • Required

    Applies padding to the left of the element the size of the grid gutter.

Modifiers

    • .layout--tiny

    • Enabled

    Quarter of the standard gutter size between layout elements.

    • .layout--small

    • Enabled

    Half of the standard gutter size between layout elements.

    • .layout--large

    • Enabled

    Double the standard gutter size between layout elements.

    • .layout--huge

    • Enabled

    Quadruple the standard gutter size between layout elements.

    • .layout--flush

    • Enabled

    Remove all gutter spacing between the layout elements.

    • .layout--rev

    • Enabled

    Reverse the horizontal flow of layout item elements. This only applies when they sit next to each other, it does not reverse the vertical order of the elements.

    • .layout--alternate

    • Enabled

    Alternate the inner layout elements, every second layout item reverses, which is useful for alternating listing types.

    • .layout--middle

    • Enabled

    Align the layout elements to their vertical center.

    • .layout--bottom

    • Enabled

    Align the layout elements so they sit at the bottom line together.

    • .layout--right

    • Enabled

    Align the layout elements to sit to the right of the layout container.

    • .layout--center

    • Enabled

    Align the layout elements to sit to the center of the layout container.

    • .layout--auto

    • Enabled

    Force the layout item elements width to match the width of the inner elements. This is useful for horizontal lists.