Composables

• margin-auto: Sets margin to margin: 0 auto
• user-background: Sets background to user preferred (white or black)
• padding: Add padding to an element
• margin: Add margin to an element
• gutter: Add gutter (2x margin) to an element
• inner-gutter: Add gutter-sized padding to an element
• text-padding: Add text-padding to an element
• text-margin: Add text-margin to an element
• text-trim: Set line-height to 1
• text-center: Sets text-align to center
• text-left: Sets text-align to left
• text-right: Sets text-align to right
• text-rounded: Like rounded, but smaller for text
• block: Sets an element to display: block
• inline: Sets an element to display: inline
• gap-margin: Sets gap to margin
• gap-border-width: Sets gap to border-width
• gap-text-padding: Sets gap to text-padding
• gap-text-margin: Sets gap to text-margin
• flatten: removes shadows of self and children
• rounded: Sets the border-radius to the base-color border-radius
• shade: Makes the text black
• tint: Makes the text white
• hidden: hidden on all breakpoints (like hide but not composable)
• viewport-height: Sets an element to viewport height
• clearfix: clears floats

Bump

The bump composable moves things around by 2px. Combine it with up, down, left and right to specify which direction.