SUPERLAB - WRAPPING SHORTHANDS

Grid helper

source/styles/07-Helper/_grid.scss

We use these wrapping shorthands for common patterns across desktop, tablet, and mobile views. 321 is equal to: three blocks on desktop, two blocks on tablet, one block on mobile. We have built a marvellous machine that can add any wrapping rule. See the grid helper css sheet to add any number series you need. Common examples follow.

Grid wrap rule 321

221
422
332

Flex fallback

source/styles/07-Helper/_flex-grid.scss

Usually we use grid, but we have a dupe/fallback version of this that uses flex box at that is useful sometimes. Add this wrap rule to the container instead of the grid cell. This flex grid defaults to align center (so the left edge won't align to grid as is) but you can override this if you want. You can also use this conditionally just for IE11 by declaring h-ie-grid.

Flex wrap rule 321

221
422
332