• 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
  • trim: Removes bottom margin
  • trim-inner: Removes bottom margin of inner elements
  • trim-all: Removes bottom margin of self and children
  • hidden: hidden on all breakpoints
  • viewport-height: Sets an element to viewport height
  • clearfix: clears floats

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


The .modal composable lets you quickly put together a simple modal: