Width & Height

Width
Class Description Quick Example
.w--* .max-w-*
.w-*vh .min-w-*vh .max-w-*vh
.w-inherit .w-auto .mw-100 .min-w-0

Smarty added few width helper classes. In many situations, are pure gold, without writing repeating CSS rules for elements.
Widths are in pixels!

Width variables defined in: _core/utils/_variables.scss

.w--300 (300px fixed width)
.max-w-300 (300px max. width allowed) $util-width-val: 1 2 3 4 5 6 8 10 15 20 25 30 35 40 50 60 70 80 90 100 120 150 180 200 220 250 280 300 350 400 450 500 600 700 800 !default;

.w-25vw (25% viewport width)
.min-w-25vw (25% min viewport width)
.max-w-25vw (25% max viewport width) $util-viewport-val: 25, 33, 50, 75, 100 !default;

.mw-100 (100% max. width) - used as a fix for some elements

.min-w-0 (0 min. width) - used as a "fix" on .d-flex by .text-truncate

.w--80

.w--120

Height
Class Description Quick Example
.h--* .max-h-*
.h-*vh .min-h-*vh .max-h-*vh
Mobile helper
.max-h-*-xs

Height variables defined in: _core/utils/_variables.scss
Heights are in pixels!

.h--300 (300px fixed height)
.max-h-300 (300px height max. allowed)
.max-h-300-xs (300px height max. allowed on mobile - overwrite .max-h-*)
$util-height-val: 1 2 3 4 5 6 8 10 15 20 25 30 35 40 50 60 70 80 90 100 120 150 180 200 220 250 280 300 350 400 450 500 600 700 800 !default; * Uses the same variables as width!

.h-25vh (25% viewport height)
.min-h-25vh (25% min viewport height)
.max-h-25vh (25% max viewport height) $util-viewport-val: 25, 33, 50, 75, 100 !default;

.h--50

.h--120

.h--150 .w--150