Flexbox Utilities

Timothy Ricks developed an incredible presentation of flex properties on Lumos – a huge shout out for that. We simplified the structure a bit and made a few small modifications.

Horizontal Flex Utilities
u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch
Vertical Flex Utilities
u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between
Other Flex Utilities
u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Grid Layout Utilities

This Grid Layout utilities system is a streamlined version of Lumos by Timothy Ricks.
Grids can use values like subgrid or autofit.

u-grid-custom
example: u-grid-3col
example: u-grid-4col
u-grid-autofit
u-grid-sub
u-col
u-col-full