Flexible Framework Docs Blog Home

Documentation

Introduction

Flexible Framework

Variables

Breakpoint Variables Color Variables

Utilities

Grid Image Sizing

Classes

Background-Color Color Display
Float Font-Size Font-Style Font-Weight Line-Height Margin Padding Text-Align Text-Transform Text-Decoration-Line

Flexible Framework: Font-Weight

_font-weight.scss

Font-Weight: Class Prefix Options (Required)

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

Abbr Strict .fnt-weight
Strict .font-weight

Font-Weight: Class Value Extensions (Required)

The following Font-Weight values are provided as they are the most commonly used.

-normal -bold -bolder -lighter -100 -200 -300 -400 -500 -600 -700 -800 -900

Font-Weight: Example Code



<!-- Abbreviated Strict: Font is italic. -->
<div class="fnt-weight-uppercase">Italic Font-Weight</div>

<!-- Strict: Font is Capitalizes. -->
<div class="font-weight-capitalize">Oblique Font-Weight</div>