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
  • 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
Bump

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

Modal

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