Flexible Framework: Display

_display.scss

Display: Requirements

_breakpoint-variables.scss

Display: Variables

The following display values are the most common. However, there are other values you can add. Be careful. Because display values are tied to breakpoints your css can get rather large.



/* --------------- Display Variables --------------- */

/* Display - The following display values are the most common. However, there are other values you can add. Be careful. Because display values are tied to breakpoints your css can get rather large. */
$displays: ('block', 'inline', 'inline-block', 'none');

/* --------------- /Display Variables --------------- */



Display: Class Prefix Options (Required)

The Display Class Prefix can be written in different ways depending on your desired specificity.

Minimal .dis
Strict .display

Display: 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

Display: Class Value Extensions (Required)

The following Display values are provided as they are the most commonly used. Display values can be altered in the variable-settings.scss file. Be careful. Display values are tied to breakpoints. Your css can get rather large.

-block -inline -inline-block -none

Display: Example Code



<!-- Minimal: Hide the show as block if the screeen is 768px wide. -->
<div class="dis-tn-none dis-md-block">Display</div>

<!-- Strict: Hide the show as inline-block if the screeen is 768px wide. -->
<div class="display-tn-none display-md-inline-block">Display</div>