_display.scss
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 --------------- */
The Display Class Prefix can be written in different ways depending on your desired specificity.
Minimal | .dis |
---|---|
Strict | .display |
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 | Printed Page | All Devices |
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
Display