Size setters

FlatifyCSS is designed based on rem for root and em for each element, so it is possible to change components size just by changing font-size.

Here is the list of classes to change elements font size to control their size:
.size-xs or .text-xs
.size-sm or .text-sm
.size-md or .text-md
.size-lg or .text-lg
.size-2x or .text-2x
.size-3x or .text-3x
.size-4x or .text-4x
.size-5x or .text-5x

Custom helper classes

Note that these classes can be customized in _config.scss, there is a variable called $FONT_SIZE_LIST, These classes are generated from this list. So it is possible to create customized helper classes for font sizes simply!

_config.scss

// This list will be converted to helper classes.
// .size-[] | .text-[]
$FONT_SIZE_LIST: (
  xs: 0.5em,
  sm: 0.75em,
  md: 1em,
  lg: 1.5em,
  2x: 2.15em,
  3x: 2.5em,
  4x: 3.14em,
  5x: 3.75em,
  custom-largest: 8em,
) !default;