Utilities

flow

The following classes affect the display property of the parent element. By default both .flow--flex and .flow--grid cause the parent to be 100% wide, whereas .flex--inline will cause the parent to be as wide as the content within.

flow__direction

The following classes affect the flex-direction / grid-auto-flow property of the parent element, causing the children to be laid out in the parent container in a specific direction. Please note the natural direction for all flow types is set to row and will display horizontally.

flow__align--horizontal

The following classes affect the justify-content property of the parent element, causing the children to align horizontally in the parent element in a specific way. The classes must be combined with one of the .flow-- classes above to have any effect. Depending on the .flow-- class used, the following classes may not appear to have any affect, however, if your parent element is sufficiently wide, you’ll start to see the children move in the container.

flow__align--vertical

The following classes affect the align-items property of the parent element, causing the children to align vertically in the parent element in a specific way. The classes must be combined with one of the .flow-- classes above to have any effect. Depending on the .flow-- class used, the following classes may not appear to have any affect, however, if your parent element is sufficiently tall, you’ll start to see the children move in the container.

flow__self

Sometimes you want to adjust the positioning of a child within a parent that is different than all the others’ positioning. If you use the following class on a child it will adjust the positioning of only that element. It affects the align-self property of the child. Depending on the track direction (.flow__direction--) of the parent it will behave accordingly.

flow__direction--row

flow__direction--column

flow__size

It’s particularly helpful to define the height/width of a flow item (specifically one with .flow--inline), the following classes take their size arguments from the global size property used in other utility classes. Combined with .flow--inline .flow__align--h-center .flow__align--v-center and constrained sizing, it’s easy to have a predictably sized element which flows within a parent.

Specialty classes

The following classes can only be applied to other flow parents with either flow--flex or flow--inline, as their styling only apply to flex items.

flow__flex--grow / flow__flex--shrink

Flow flex properties are meant to control the behavior of a child element when the alotted space available in the parent provides opportunities to grow or are constrained in width, causing flex items to normally shrink. Using a combination of .flow__flex--grow and .flow__flex--shrink-no for example would allow an element to fill as much space as the parent allows, but not ever be smaller than it’s contents.

flow__flex--wrap

Flow wrapping controls a parent’s ability to create a new row of content if it runs out of space. This option is particularly useful when dealing with responsive designs which look great on large screens but need to wrap to a second line on mobile devices. Conversely, you can force items to be contained to one line if necessary—this technique for example works well for things like carousels or slideshows.

flow__grid--gap

To place an even amount of space between columns and rows within a .flow--grid parent you can add the following classes:

bottom

left

right

top

horizontal

vertical

all

bottom

left

right

top

all

tl

tr

bl

br