Flexible Framework: Text-Align

_text-align.scss

Text-Align: Requirements

_breakpoint-variables.scss

Text-Align: Class Prefix Options (Required)

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

Minimal .txt
Abbr Strict .txt-align
Strict .text-align

Text-Align: 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

Text-Align: Class Value Extensions (Required)

The following Text-Align values are provided.

-center -left -right -justify

Text-Align: Example Code



<!-- Minimal: Text is aligned center then it is aligned left if the screeen is 768px wide. -->
<div class="txt-tn-center txt-tn-left">Text-Align</div>

<!-- Abreviated Strict: Text is aligned center then it is aligned left if the screeen is 768px wide. -->
<div class="txt-tn-align-center txt-tn-align-center">Text-Align</div>

<!-- Strict: Text is aligned center then it is aligned left if the screeen is 768px wide. -->
<div class="text-tn-align-center text-tn-align-center">Text-Align</div>