Skip to content
WovenUI

Sizing mixins

Sizing utilities: .w-{key}, .h-{key}, .min-w-{key}, .min-h-{key}, .max-w-{key}, .max-h-{key} from the spacing scale, .w-{n}p etc. from $percentages, .w-{breakpoint}, .min-w-{breakpoint} and .max-w-{breakpoint} from breakpoint widths (there are no h-, min-h- or max-h- breakpoint classes), and keyword classes (.w-full, .h-screen, .w-fit).

Responsive variants use the @breakpoint suffix (.w-full@md).

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Sizing. The A to Z index lists every public mixin and function.

Source: utilities/_sizing.scss

Mixins

width height min-width min-height max-width max-height width-percent height-percent min-width-percent min-height-percent max-width-percent max-height-percent w-auto w-full h-auto h-full w-max h-max w-min h-min w-fit h-fit min-w-full max-w-full min-h-full max-h-full w-screen h-screen

width mixin

Sets width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.sidebar {
  @include width(20rem);
}
Compiled CSS
.sidebar {
  width: 20rem;
}

width on MDN

Source: utilities/_sizing.scss:94

height mixin

Sets height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.avatar {
  @include height(12); // height: var(--wu-space-12)
}
Compiled CSS
.avatar {
  height: var(--wu-space-12);
}

height on MDN

Source: utilities/_sizing.scss:105

min-width mixin

Sets min-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin min-width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.dialog {
  @include min-width(16); // min-width: var(--wu-space-16)
}
Compiled CSS
.dialog {
  min-width: var(--wu-space-16);
}

min-width on MDN

Source: utilities/_sizing.scss:116

min-height mixin

Sets min-height from a spacing key, a percentage key, a sizing keyword or a raw value; negative keys and unknown words raise an error.

@mixin min-height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, or a raw length, percentage, calc() or var()

Example

.drop-zone {
  @include min-height(10rem);
}
Compiled CSS
.drop-zone {
  min-height: 10rem;
}

min-height on MDN

Source: utilities/_sizing.scss:127

max-width mixin

Sets max-width from a spacing key, a percentage key, a breakpoint name, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.

@mixin max-width($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), breakpoint name (lg gives its width), auto, min-content, max-content, fit-content, none, or a raw length, percentage, calc() or var()

Example

.article {
  @include max-width(48rem);
}
Compiled CSS
.article {
  max-width: 48rem;
}

max-width on MDN

Source: utilities/_sizing.scss:138

max-height mixin

Sets max-height from a spacing key, a percentage key, a sizing keyword, none or a raw value; negative keys and unknown words raise an error.

@mixin max-height($value)
ParameterTypeDefaultDescription
$valueNumber|Length|StringRequiredSpacing key (4), percentage key (50p gives 50%, 33p gives 33.333%), auto, min-content, max-content, fit-content, none, or a raw length, percentage, calc() or var()

Example

.dropdown-menu {
  @include max-height(64);
}
Compiled CSS
.dropdown-menu {
  max-height: var(--wu-space-64);
}

max-height on MDN

Source: utilities/_sizing.scss:149

width-percent mixin

Sets width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.column {
  @include width-percent(50); // width: 50%
}
Compiled CSS
.column {
  width: 50%;
}

width on MDN

Source: utilities/_sizing.scss:181

height-percent mixin

Sets height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.chart {
  @include height-percent(75); // height: 75%
}
Compiled CSS
.chart {
  height: 75%;
}

height on MDN

Source: utilities/_sizing.scss:192

min-width-percent mixin

Sets min-width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin min-width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.search {
  @include min-width-percent(30); // min-width: 30%
}
Compiled CSS
.search {
  min-width: 30%;
}

min-width on MDN

Source: utilities/_sizing.scss:203

min-height-percent mixin

Sets min-height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin min-height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.hero {
  @include min-height-percent(50); // min-height: 50%
}
Compiled CSS
.hero {
  min-height: 50%;
}

min-height on MDN

Source: utilities/_sizing.scss:214

max-width-percent mixin

Sets max-width as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin max-width-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.toast {
  @include max-width-percent(90); // max-width: 90%
}
Compiled CSS
.toast {
  max-width: 90%;
}

max-width on MDN

Source: utilities/_sizing.scss:225

max-height-percent mixin

Sets max-height as a percentage from a unitless number or a percentage; any other value raises an error.

@mixin max-height-percent($i)
ParameterTypeDefaultDescription
$iNumber|PercentageRequiredUnitless number (50 gives 50%; 33 and 66 give the exact thirds 33.333% and 66.667%) or a percentage (50%)

Example

.modal-body {
  @include max-height-percent(80); // max-height: 80%
}
Compiled CSS
.modal-body {
  max-height: 80%;
}

max-height on MDN

Source: utilities/_sizing.scss:236

w-auto mixin

Sets width to auto.

@mixin w-auto

Example

.image {
  @include w-auto;
}
Compiled CSS
.image {
  width: auto;
}

Source: utilities/_sizing.scss:245

w-full mixin

Sets width to 100%.

@mixin w-full

Example

.input-group {
  @include w-full;
}
Compiled CSS
.input-group {
  width: 100%;
}

Source: utilities/_sizing.scss:254

h-auto mixin

Sets height to auto.

@mixin h-auto

Example

.image {
  @include h-auto;
}
Compiled CSS
.image {
  height: auto;
}

Source: utilities/_sizing.scss:263

h-full mixin

Sets height to 100%.

@mixin h-full

Example

.panel {
  @include h-full;
}
Compiled CSS
.panel {
  height: 100%;
}

Source: utilities/_sizing.scss:272

w-max mixin

Sets width to max-content.

@mixin w-max

Example

.menu {
  @include w-max;
}
Compiled CSS
.menu {
  width: max-content;
}

Source: utilities/_sizing.scss:281

h-max mixin

Sets height to max-content.

@mixin h-max

Example

.menu {
  @include h-max;
}
Compiled CSS
.menu {
  height: max-content;
}

Source: utilities/_sizing.scss:290

w-min mixin

Sets width to min-content.

@mixin w-min

Example

.label {
  @include w-min;
}
Compiled CSS
.label {
  width: min-content;
}

Source: utilities/_sizing.scss:299

h-min mixin

Sets height to min-content.

@mixin h-min

Example

.label {
  @include h-min;
}
Compiled CSS
.label {
  height: min-content;
}

Source: utilities/_sizing.scss:308

w-fit mixin

Sets width to fit-content.

@mixin w-fit

Example

.chip {
  @include w-fit;
}
Compiled CSS
.chip {
  width: fit-content;
}

Source: utilities/_sizing.scss:317

h-fit mixin

Sets height to fit-content.

@mixin h-fit

Example

.chip {
  @include h-fit;
}
Compiled CSS
.chip {
  height: fit-content;
}

Source: utilities/_sizing.scss:326

min-w-full mixin

Sets min-width to 100%.

@mixin min-w-full

Example

.table {
  @include min-w-full;
}
Compiled CSS
.table {
  min-width: 100%;
}

Source: utilities/_sizing.scss:335

max-w-full mixin

Sets max-width to 100%.

@mixin max-w-full

Example

.media {
  @include max-w-full;
}
Compiled CSS
.media {
  max-width: 100%;
}

Source: utilities/_sizing.scss:344

min-h-full mixin

Sets min-height to 100%.

@mixin min-h-full

Example

.layout {
  @include min-h-full;
}
Compiled CSS
.layout {
  min-height: 100%;
}

Source: utilities/_sizing.scss:353

max-h-full mixin

Sets max-height to 100%.

@mixin max-h-full

Example

.media {
  @include max-h-full;
}
Compiled CSS
.media {
  max-height: 100%;
}

Source: utilities/_sizing.scss:362

w-screen mixin

Sets width to 100vw, the full viewport width.

@mixin w-screen

Example

.backdrop {
  @include w-screen;
}
Compiled CSS
.backdrop {
  width: 100vw;
}

width on MDN

Source: utilities/_sizing.scss:372

h-screen mixin

Sets height to 100dvh, the full dynamic viewport height.

@mixin h-screen

Example

.app-shell {
  @include h-screen;
}
Compiled CSS
.app-shell {
  height: 100dvh;
}

height on MDN

Source: utilities/_sizing.scss:382