Skip to main content

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;