Height and Width
Set the dimensions of an item.
Utility Modules
Height
Set the height of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.height-units | u-height(units) | @include u-height('card') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| height | False | None | 0.11 KB | 0.6 KB |
Class name
Estimated computed value
.height-auto
auto
.height-0
0
.height-1px
1px
.height-2px
2px
.height-05
4px
.height-1
8px
.height-105
12px
.height-2
16px
.height-205
20px
.height-3
24px
.height-4
32px
.height-5
40px
.height-6
48px
.height-7
56px
.height-8
64px
.height-9
72px
.height-10
80px
.height-15
120px
.height-card
160px
.height-card-lg
240px
.height-mobile
320px
.height-full
100%
.height-viewport
100vh
Width
Set the width of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.width-units | u-width(units) | @include u-width('auto') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| width | True | None | 0.56 KB | 3 KB |
Class name
Estimated computed value
.width-auto
auto
.width-0
0
.width-1px
1px
.width-2px
2px
.width-05
4px
.width-1
8px
.width-105
12px
.width-2
16px
.width-205
20px
.width-3
24px
.width-4
32px
.width-5
40px
.width-6
48px
.width-7
56px
.width-8
64px
.width-9
72px
.width-10
80px
.width-15
120px
.width-card
160px
.width-card-lg
240px
.width-mobile
320px
.width-mobile-lg
480px
.width-tablet
640px
.width-tablet-lg
880px
.width-desktop
1024px
.width-desktop-lg
1200px
.width-widescreen
1400px
.width-full
100%
Maximum Height
Set the maximum height of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.maxh-units | u-maxh(units) | @include u-maxh('screen') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| max-height | False | None | 0.12 KB | 0.65 KB |
Class name
Estimated computed value
.maxh-none
none
.maxh-05
4px
.maxh-1
8px
.maxh-105
12px
.maxh-2
16px
.maxh-205
20px
.maxh-3
24px
.maxh-4
32px
.maxh-5
40px
.maxh-6
48px
.maxh-7
56px
.maxh-8
64px
.maxh-9
72px
.maxh-10
80px
.maxh-15
120px
.maxh-card
160px
.maxh-card-lg
240px
.maxh-mobile
320px
.maxh-mobile-lg
480px
.maxh-tablet
640px
.maxh-tablet-lg
880px
.maxh-viewport
100vh
Maximum Width
Set the maximum width of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.maxw-units | u-maxw(units) | @include u-maxw('card-lg') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| max-width | False | None | 0.13 KB | 0.72 KB |
Class name
Estimated computed value
.maxw-none
none
.maxw-05
4px
.maxw-1
8px
.maxw-105
12px
.maxw-2
16px
.maxw-205
20px
.maxw-3
24px
.maxw-4
32px
.maxw-5
40px
.maxw-6
48px
.maxw-7
56px
.maxw-8
64px
.maxw-9
72px
.maxw-10
80px
.maxw-15
120px
.maxw-card
160px
.maxw-card-lg
240px
.maxw-mobile
320px
.maxw-mobile-lg
480px
.maxw-tablet
640px
.maxw-tablet-lg
880px
.maxw-desktop
1024px
.maxw-desktop-lg
1200px
.maxw-widescreen
1400px
.maxw-full
100%
Minimum Height
Set the minimum height of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.minh-units | u-minh(units) | @include u-minh('screen') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| min-height | False | None | 0.13 KB | 0.72 KB |
Class name
Estimated computed value
.minh-none
none
.minh-05
4px
.minh-1
8px
.minh-105
12px
.minh-2
16px
.minh-205
20px
.minh-3
24px
.minh-4
32px
.minh-5
40px
.minh-6
48px
.minh-7
56px
.minh-8
64px
.minh-9
72px
.minh-10
80px
.minh-15
120px
.minh-card
160px
.minh-card-lg
240px
.minh-mobile
320px
.minh-mobile-lg
480px
.minh-tablet
640px
.minh-tablet-lg
880px
.minh-full
100%
.minh-viewport
100vh
Minimum Width
Set the minimum width of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.minw-units | u-minw(units) | @include u-minw('auto') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| min-width | False | None | 0.07 KB | 0.4 KB |
Class name
Estimated computed value
.minw-none
none
.minw-05
4px
.minw-1
8px
.minw-105
12px
.minw-2
16px
.minw-205
20px
.minw-3
24px
.minw-4
32px
.minw-5
40px
.minw-6
48px
.minw-7
56px
.minw-8
64px
.minw-9
72px
.minw-10
80px
.minw-15
120px
Aspect Ratio
Set the aspect ratio of an element.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.add-aspect-ratio | u-add-aspect(ratio) | @include add-aspect('16x9') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| add-aspect | False | None | 0.08 KB | 0.44 KB |
Class name
Estimated computed value
.add-aspect-9x16
.add-aspect-1x1
.add-aspect-4x3
.add-aspect-16x9
.add-aspect-2x1
Circle
Set an element to be a circle of specfic dimensions.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.circle-units | u-circle(units) | @include u-circle('05') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| circle | False | None | 0.19 KB | 1 KB |
Class name
Estimated computed value
.circle-2px
2px
.circle-05
4px
.circle-1
8px
.circle-105
12px
.circle-2
16px
.circle-205
20px
.circle-3
24px
.circle-4
32px
.circle-5
40px
.circle-6
48px
.circle-7
56px
.circle-8
64px
.circle-9
72px
.circle-10
80px
.circle-15
120px
.circle-card
160px
.circle-card-lg
240px
.circle-mobile
320px
Square
Set an element to be a square of specfic dimensions.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.square-units | u-square(units) | @include u-square('05') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| square | False | None | 0.14 KB | 0.73 KB |
Class name
Estimated computed value
.square-2px
2px
.square-05
4px
.square-1
8px
.square-105
12px
.square-2
16px
.square-205
20px
.square-3
24px
.square-4
32px
.square-5
40px
.square-6
48px
.square-7
56px
.square-8
64px
.square-9
72px
.square-10
80px
.square-15
120px
.square-card
160px
.square-card-lg
240px
.square-mobile
320px