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;