Width Utilities
NuvoUI provides a comprehensive set of utilities for controlling the width of elements, from fixed dimensions to percentage-based and content-aware sizing.
Fixed Width Utilities
Apply specific width values from the spacing scale:
Available Fixed Width Classes
Width utilities are generated from the VAR.$spacings map, including values like:
| Class | Size | Pixels |
|---|---|---|
.w-0 | 0 | 0px |
.w-1 | 0.25rem | 4px |
.w-2 | 0.5rem | 8px |
.w-4 | 1rem | 16px |
.w-8 | 2rem | 32px |
.w-12 | 3rem | 48px |
.w-16 | 4rem | 64px |
.w-24 | 6rem | 96px |
.w-32 | 8rem | 128px |
.w-48 | 12rem | 192px |
.w-64 | 16rem | 256px |
Percentage Width Utilities
Set width as a percentage of the parent container:
Available Percentage Width Classes
Width percentage utilities are generated from the VAR.$percentages list:
| Class | Description |
|---|---|
.w-0p | Sets width to 0% |
.w-5p | Sets width to 5% |
.w-10p | Sets width to 10% |
.w-25p | Sets width to 25% |
.w-33p | Sets width to 33% |
.w-50p | Sets width to 50% |
.w-66p | Sets width to 66% |
.w-75p | Sets width to 75% |
.w-90p | Sets width to 90% |
.w-100p | Sets width to 100% |
Special Width Values
Apply common width values:
Content-Based Width Values
Control width based on content:
Available Special Width Classes
| Class | CSS Property | Description |
|---|---|---|
.w-auto | width: auto; | Default width, based on content and constraints |
.w-full | width: 100%; | Full width of container |
.w-screen | width: 100vw; | Full viewport width |
.w-min | width: min-content; | Width based on minimum content size |
.w-max | width: max-content; | Width based on maximum content size |
.w-fit | width: fit-content; | Width based on fit-content algorithm |
Min-Width and Max-Width Utilities
Control minimum and maximum width constraints:
Available Min-Width and Max-Width Classes
- Min-width classes: Start with
min-w-(e.g.,min-w-full,min-w-32,min-w-50p) - Max-width classes: Start with
max-w-(e.g.,max-w-full,max-w-64,max-w-75p) - Breakpoint-based max-widths: Based on
VAR.$breakpoints(e.g.,max-w-sm,max-w-md,max-w-lg)
Responsive Width Utilities
Change width at different breakpoints using the @breakpoint notation:
Interactive Width States
Change width on hover or with group interactions:
Common UI Patterns
Container With Maximum Width
Responsive Grid Items
Flexible Form Inputs
Sidebar Layout
Width Utilities Reference Table
Fixed Width Classes
Width utilities are generated from the VAR.$spacings map:
| Class | Size | Pixels |
|---|---|---|
.w-0 | 0 | 0px |
.w-1 | 0.25rem | 4px |
.w-2 | 0.5rem | 8px |
.w-3 | 0.75rem | 12px |
.w-4 | 1rem | 16px |
.w-5 | 1.25rem | 20px |
.w-6 | 1.5rem | 24px |
.w-8 | 2rem | 32px |
.w-10 | 2.5rem | 40px |
.w-12 | 3rem | 48px |
.w-16 | 4rem | 64px |
.w-20 | 5rem | 80px |
.w-24 | 6rem | 96px |
.w-32 | 8rem | 128px |
.w-40 | 10rem | 160px |
.w-48 | 12rem | 192px |
.w-56 | 14rem | 224px |
.w-64 | 16rem | 256px |
Percentage Width Classes
Width percentage utilities are generated from the VAR.$percentages list:
| Class | Description |
|---|---|
.w-0p | Sets width to 0% |
.w-5p | Sets width to 5% |
.w-10p | Sets width to 10% |
.w-15p | Sets width to 15% |
.w-20p | Sets width to 20% |
.w-25p | Sets width to 25% |
.w-30p | Sets width to 30% |
.w-33p | Sets width to 33% |
.w-40p | Sets width to 40% |
.w-50p | Sets width to 50% |
.w-60p | Sets width to 60% |
.w-66p | Sets width to 66% |
.w-70p | Sets width to 70% |
.w-75p | Sets width to 75% |
.w-80p | Sets width to 80% |
.w-90p | Sets width to 90% |
.w-100p | Sets width to 100% |
Special Width Classes
| Class | CSS Property | Description |
|---|---|---|
.w-auto | width: auto; | Default width, based on content and constraints |
.w-full | width: 100%; | Full width of container |
.w-screen | width: 100vw; | Full viewport width |
.w-min | width: min-content; | Width based on minimum content size |
.w-max | width: max-content; | Width based on maximum content size |
.w-fit | width: fit-content; | Width based on fit-content algorithm |
Min-Width Classes
| Class | Description |
|---|---|
.min-w-0 | Sets min-width to 0 |
.min-w-full | Sets min-width to 100% |
.min-w-{size} | Sets min-width to a specific size from spacing scale |
.min-w-{percentage}p | Sets min-width to a specific percentage |
Max-Width Classes
| Class | Description |
|---|---|
.max-w-0 | Sets max-width to 0 |
.max-w-full | Sets max-width to 100% |
.max-w-{size} | Sets max-width to a specific size from spacing scale |
.max-w-{percentage}p | Sets max-width to a specific percentage |
.max-w-{breakpoint} | Sets max-width to a specific breakpoint size |
SCSS Mixins
NuvoUI provides a comprehensive set of width-related mixins for use in your SCSS:
Width Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include width($value) | Sets width using units | $value: width value with units |
@include width-percent($i) | Sets width as percentage | $i: percentage as number |
@include min-width($value) | Sets minimum width using units | $value: width value with units |
@include min-width-percent($i) | Sets minimum width as percentage | $i: percentage as number |
@include max-width($value) | Sets maximum width using units | $value: width value with units |
@include max-width-percent($i) | Sets maximum width as percentage | $i: percentage as number |
Special Width Mixins
| Mixin | Description | CSS Output |
|---|---|---|
@include w-auto | Sets width to auto | width: auto; |
@include w-full | Sets width to 100% | width: 100%; |
@include w-screen | Sets width to viewport width | width: 100vw; |
@include w-max | Sets width to max-content | width: max-content; |
@include w-min | Sets width to min-content | width: min-content; |
@include w-fit | Sets width to fit-content | width: fit-content; |
@include min-w-full | Sets min-width to 100% | min-width: 100%; |
@include max-w-full | Sets max-width to 100% | max-width: 100%; |