Flexible Framework: Font-Size

_font-size.scss

Font-Size: Requirements

_breakpoint-variables.scss

Font-Size: Variables

Add or subtract font-sizes (px).



/* --------------- Font-Size Variables --------------- */

/* Add or subtract font-sizes (px). Be careful. Because font-sizes are tied to breakpoints your css can get rather large. */
$fnt-sizes: (10, 12, 14, 16);

/* --------------- /Font-Size Variables --------------- */



Font-Size: Class Prefix Options (Required)

The Font-Size Class Prefix can be written in different ways depending on your desired specificity.

Minimal .fnt
Abbr Strict .fnt-size
Strict .font-size

Font-Size: Class Breakpoint Extensions (Required)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

Ext Def Breakpoint Device
-tn tiny 0px Small Phone
-xs extra-small 480px Phone
-sm small 640px Small Tablet
-md medium 768px Tablet
-lg large 992px Laptop
-xl extra-large 1200px Desktop
-pr print Printed Page All Devices

Font-Size: Class Value Extensions (Required)

The following Font-Size values are provided as they are the most commonly used. Font-Size values can be altered in the variable-settings.scss file.

Ext Size
-10 10px
-12 12px
-14 14px
-16 16px

Font-Size: Example Code



<!-- Minimal: Font-Size is 10px then it is 16px if the screeen is 768px wide. -->
<div class="fnt-tn-10 fnt-md-16">Font-Size</div>

<!-- Strict: Font-Size is 10px then it is 16px if the screeen is 768px wide. -->
<div class="font-tn-10 font-md-16">Font-Size</div>