Classes

The primary way of using flow.scss is importing it into your content environment and accessing provided classes to apply styling to your elements.

Here are those classes:

(note, most classes have shorthand/alternative names that can be utilized)

Layouts

Flex

Class	Effect	Alternative class
flex	Turns an element into a flex-box.
flex-column	Changes the flex direction to column	flex column, column
flex-row	Changes the flex direction to row	flex row, row
flex-row	Changes the flex direction to row	flex row, row

Content justification and alignment

Class	Effect	Alternative class
justify-content-start	Justifies flex-box content to the start of the box.	justify-start
justify-content-end	Justifies flex-box content to the end of the box.	justify-end
justify-content-center	Justifies flex-box content to the center of the box.	justify-center
justify-content-baseline	Justifies flex-box content to the baseline of the box.	justify-baseline
justify-content-between	Spaces flex-box content to leave maximum whitespace.	justify-between
justify-content-around	Spaces flex-box content evenly with a half-space between them.	justify-around
justify-content-evenly	Spaces flex-box content evenly.	justify-evenly
justify-content-stretch	Stretches flex-box content to fill the box.	justify-stretch
align-content-start	Aligns flex-box content to the start of the box.	align-start
align-content-end	Aligns flex-box content to the end of the box.	align-end
align-content-center	Aligns flex-box content to the center of the box.	align-center
align-content-baseline	Aligns flex-box content to the baseline of the box.	align-baseline
align-content-stretch	Stretches flex-box content to fill the box.	align-stretch

Content flow control

Class	Effect
wrap	Causes flex-box content to wrap within its parent instead of overflowing.
nowrap	Stops flex-box content from wrapping within its parent.
wrap-reverse	Wraps flex-box content in the opposite direction within its parent.

Individual content alignment

Individual flex-box children can align themselves differently from their siblings.

Class	Effect
align-self-start	Aligns an element to the start of its parent flex-box.
align-self-end	Aligns an element to the end of its parent flex-box.
align-self-center	Aligns an element to the center of its parent flex-box.
align-self-stretch	Stretches an element to fill its parent flex-box's alignment axis.
align-self-baseline	Aligns an element to the baseline of its parent flex-box.

Container space assignment

Class	Effect
grow	Causes an element to fill the remaining whitespace in its parent flex-box.
shrink	Causes an element to take up as little space as it can within its parent flex-box.

Elements

Margin, padding, and gap

Class	Effect	Alternative class
margin	Applies 1.5rem of margin to an element.
margin-05	Applies 0.75rem of margin to an element.
margin-025	Applies 0.375rem of margin to an element.
margin-top	Applies 1.5rem of margin to the top of an element.	margin-t, margin-up, margin-u
margin-right	Applies 1.5rem of margin to the right of an element.	margin-r
margin-bottom	Applies 1.5rem of margin to the bottom of an element.	margin-b, margin-down, margin-d
margin-left	Applies 1.5rem of margin to the left of an element.	margin-l
padding	Applies 1rem of padding to an element.
padding-05	Applies 0.5rem of padding to an element.
padding-025	Applies 0.25rem of padding to an element.
padding-top	Applies 1rem of padding to the top of an element.	padding-t, padding-up, padding-u.
padding-right	Applies 1rem of padding to the right of an element.	padding-r
padding-bottom	Applies 1rem of padding to the bottom of an element.	padding-b, padding-down, padding-d
padding-left	Applies 1rem of padding to the left of an element.	padding-l
gap	Applies 0.5rem of gap to an element.
gap-05	Applies 0.25rem of gap to an element.
gap-025	Applies 0.125rem of gap to an element.
gap-2	Applies 1rem of gap to an element.
gap-4	Applies 2rem of gap to an element.

Media

Filling the container or the viewport

Class	Effect	Alternative class
fill-width	Causes an element to fill the width of its parent.	fill-w, f-w, fw
fill-height	Causes an element to fill the height of its parent.	fill-h, f-h, fh
fill-vp-width	Causes an element to fill the width of the viewport.	fill-vp-w, fill-vw, f-vp-w, fvpw, fvw
fill-vp-height	Causes an element to fill the height of the viewport.	fill-vp-h, fill-vh, f-vp-h, fvph, fvh

Screen-size responsiveness

Class	Effect	Alternative class
max-width-mobile-s	Sets an element's maximum width to 320px.	max-mobile-s
max-width-mobile-m	Sets an element's maximum width to 375px.	max-mobile-m
max-width-mobile-l	Sets an element's maximum width to 425px.	max-mobile-l, max-width-mobile, max-mobile
max-width-tablet	Sets an element's maximum width to 768px.	max-tablet
max-width-laptop	Sets an element's maximum width to 1024px.	max-laptop
max-width-laptop-l	Sets an element's maximum width to 1440px.	max-laptop-l
max-width-desktop	Sets an element's maximum width to 2560px.	max-desktop
max-width-ultra-4k	Sets an element's maximum width to 3840px.	max-ultra-4k
min-width-mobile-s	Sets an element's minimum width to 320px.	min-mobile-s
min-width-mobile-m	Sets an element's minimum width to 375px.	min-mobile-m
min-width-mobile-l	Sets an element's minimum width to 425px.	min-mobile-l, min-width-mobile, min-mobile
min-width-tablet	Sets an element's minimum width to 768px.	min-tablet
min-width-laptop	Sets an element's minimum width to 1024px.	min-laptop
min-width-laptop-l	Sets an element's minimum width to 1440px.	min-laptop-l
min-width-desktop	Sets an element's minimum width to 2560px.	min-desktop
min-width-ultra-4k	Sets an element's minimum width to 3840px.	min-ultra-4k
width-mobile-s	Sets an element's width to 320px.	mobile-s
width-mobile-m	Sets an element's width to 375px.	mobile-m
width-mobile-l	Sets an element's width to 425px.	mobile-l, width-mobile, mobile
width-tablet	Sets an element's width to 768px.	tablet
width-laptop	Sets an element's width to 1024px.	laptop
width-laptop-l	Sets an element's width to 1440px.	laptop-l
width-desktop	Sets an element's width to 2560px.	desktop
width-ultra-4k	Sets an element's width to 3840px.	ultra-4k
max-vw	Sets an element's maximum width to 100vw.
max-vh	Sets an element's maximum height to 100vh.
max-w-fill	Sets an element's maximum width to 100% of its parent container.	max-width-fill
max-h-fill	Sets an element's maximum height to 100% of its parent container.	max-height-fill

Transitions

Class	Effect	Alternative class
transition	Applies a bog-standard (0.15s) transition property to an element.	t
slow	Slows down (0.3s) the transition property of an element.	s
fast	Speeds up (0.1s) the transition property of an element.	f

Transition properties

Class	Effect	Alternative class
transition-property-all	Applies the element's transition settings to all of its properties.	transition-all, all
transition-property-rect	Applies the element's transition settings to only its to top, right, bottom, left, max-width, max-height, min-width, min-height, width, and height properties.	transition-rect, rect
transition-property-transform	Applies the element's transition settings to only its transform and z-index properties.	transition-transform, transform
transition-property-box	Applies the element's transition settings to only its margin, padding, gap, and border properties.	transition-box, box
transition-property-colors	Applies the element's transition settings to only its background and color properties.	transition-colors, colors

Transition timing functions

Class	Effect	Alternative class
ease	Applies the ease timing function to a transition.	e
ease-in	Applies the ease-in timing function to a transition.	e-i, ei
ease-out	Applies the ease-out timing function to a transition.	e-o, eo
ease-in-out	Applies the ease-in-out timing function to a transition.	e-i-o, eio
linear	Applies the linear timing function to a transition.	l
step-start	Applies the step-start timing function to a transition.	s-s, ss
step-end	Applies the step-end timing function to a transition.	s-e, se
jump-start	Applies the jump-start timing function to a transition.	start, j-s, js
jump-end	Applies the jump-end timing function to a transition.	end, j-e, je
jump-none	Applies the jump-none timing function to a transition.	none, j-n, jn