1.1 #00sizes.00 .size-{size}
Just shorthand for font-size: with predefined reccomended sizes.
Use following classes to size your elements, which increase readability and maintainilibility of your code.
Whenever possible use our size- class in code to increase mainatainibility and readability of your code
Following size classes are also used to set size of our CSS components.
Examples
Default styling
Button:
"This is very long text written in: "
.size-xxs
8px
Button: size-xxs
"This is very long text written in: size-xxs"
.size-xs
10px
Button: size-xs
"This is very long text written in: size-xs"
.size-s
12px
Button: size-s
"This is very long text written in: size-s"
.size-m
14px (default body size)
Button: size-m
"This is very long text written in: size-m"
.size-l
16px
Button: size-l
"This is very long text written in: size-l"
.size-xl
18px
Button: size-xl
"This is very long text written in: size-xl"
.size-xxl
20px
Button: size-xxl
"This is very long text written in: size-xxl"
.size-xxxl
24px
Button: size-xxxl
"This is very long text written in: size-xxxl"
.size-ultra
40px
Button: size-ultra
"This is very long text written in: size-ultra"
Markup
<div class="btn bg-orange fg-white [modifier class]">Button: [modifier class]</div>
<br style="clear: both"/><div class="[modifier class]">"This is very long text written in: [modifier class]"</div>
Source:
src/css/core/sizes.less, line 14