Micron grid system

Responsive grid framework based on flexbox.

Examples (use the inspector to see the markup)

Rows that fit as they're added

auto width cell

Rows that fit as they're added, inside a container

.col

Cells distribute in small, use 3/12 each from md on

md-3

Cells that stack

col sm-12

Cells that overflow on small & large

sm-12 md-6 lg-11

sm-11 md-6 lg-12

Cells that align to the top (by default)

sm-4

sm-8

Cells that align to the middle

sm-8 .row.align-center

sm-4

Cells that align to the bottom

sm-6 .row.align-bottom (+margin-bottom: 10px)

sm-6 (notice how this aligns including the bottom margin)

Cells that stretch to the height of the row

sm-4

sm-8 .row.align-stretch

Cells that align horizontally

.row.align-left

.row.align-center

.row.align-right

Now both

.row.align-center.align-middle

Cells that align against the row

align-start

align-middle

align-end

Cells with no gutter

sm-4

Cells with offset

sm-3 offset-sm-3

sm-3 offset-md-3

sm-12 md-5 offset-md-1

sm-12 md-5 offset-sm-1

Nesting

Level 1: .sm-9

Level 2: .sm-6

Visibility

sm (max-width: 690px)

md (max-width: 1020px)

lg (min-width: 1020px)

hide-from

hide-from-sm

(always hidden)

hide-from-md

hide-from-lg

show-from

show-from-sm (always shown)

show-from-md

show-from-lg

show-only

show-only-sm

show-only-md

show-only-lg