A large collection of single-purpose classes. They can be used to make tiny corrections, or even build entire interfaces.
Helpers override all other styles with !important.
It is encouraged to use helpers instead of building lots of small custom CSS classes.
Helpers are to a large extent permutations based on variables and CSS concepts. There are four different types of variables which reoccur in various helpers:
{size}: huge, large, medium, small, tiny, nano, zero*
{fraction}: whole, half, third, fourth, fifth
{brightnesses}: high, medium, low
{contrast}: high, medium, low, lowest
* The purpose of "zero" is to remove unwanted margins, paddings...
background-brightness-{brightness}
border-contrast-{contrast}
border-top-contrast-{contrast}
border-right-contrast-{contrast}
border-bottom-contrast-{contrast}
border-left-contrast-{contrast}
border-zero
border-top-zero
border-right-zero
border-bottom-zero
border-left-zero
padding-{size}
padding-top-{size}
padding-right-{size}
padding-bottom-{size}
padding-left-{size}
margin-{size}
margin-top-{size}
margin-right-{size}
margin-bottom-{size}
margin-left-{size}
margin-{size}-negative
margin-top-{size}-negative
margin-right-{size}-negative
margin-bottom-{size}-negative
margin-left-{size}-negative
font-size-{size}
font-size-huge
font-size-large
font-size-medium
font-size-small
font-size-tiny
font-size-nano
font-contrast-{contrast}
font-contrast-high
font-contrast-medium
font-contrast-low
font-contrast-lowest
bold
normal
italic
underline
line-through
lowercase
bold
normal
italic
underline
line-through
lowercase
These helpers are meant to be used together with the flex helper to create layouts.
width-{size}
height-{size}
width-{fraction}
height-{fraction}
width-{fraction}-minus-{size}
height-{fraction}-minus-{size}
Helps you build flex layouts. This helper uses -variants to provide the most useful flex features.
flex
-h-center
-h-end
-h-spread
-h-stretch
-v-center
-v-spread
-v-stretch
-wrap
Enables flex -variants
Horizontal center alignment
Horixontal end alignment
Horizontal spread to both sides
Horizontal strech to fill space
Vertical center alignment
Vertical spread to both sides
Vertical strech to fill space
Elements can wrap to new lines
display: flex
justify-content: center
justify-content: flex-end
justify-content: space-between
> * { flex-grow: 1; }
align-items: center
align-content: space-between
align-content: stretch
flex-wrap: wrap
flex
flex -h-center
flex -h-spread
flex -h-spread
flex -h-stretch
flex -h-stretch -wrap
flex -v-center -h-center