Modern layout mixins

Mixins for modern CSS layout techniques.

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. The A to Z index lists every public mixin and function.

Source: tools/_modern-layout.scss

Mixins

aspect-ratio dvh safe-area-inset print supports

aspect-ratio mixin

Sets the aspect-ratio property from a width and height (emitted as 16 / 9), a single number, auto, calc() or var(); anything else raises an error.

An unquoted 16/9 is Sass division: Sass warns and passes 1.7777777778. Write aspect-ratio(16, 9) or "16/9".

@mixin aspect-ratio($ratio, $height: null)

Parameter	Type	Default	Description
$ratio	Number|String|List	Required	Width (with $height), a ratio as text ("16/9"), list.slash(16, 9), a positive number (1.5), auto, calc() or var()
$height	Number|Null	null	Height of the ratio, when $ratio is the width

Example 1

.video {
  @include aspect-ratio(16, 9); // aspect-ratio: 16 / 9
}

Compiled CSS

.video {
  aspect-ratio: 16 / 9;
}

Example 2

.thumb {
  @include apply(aspect-ratio("4/3")); // aspect-ratio: 4 / 3
}

Compiled CSS

.thumb {
  aspect-ratio: 4 / 3;
}

aspect-ratio on MDN

Source: tools/_modern-layout.scss:72

dvh mixin

Sets height to 100dvh where supported and to 100vh otherwise, each inside an @supports block.

@mixin dvh

Example

.app-shell {
  @include dvh;
}

Compiled CSS

@supports (height: 100dvh) {
  .app-shell {
    height: 100dvh;
  }
}
@supports not (height: 100dvh) {
  .app-shell {
    height: 100vh;
  }
}

Source: tools/_modern-layout.scss:81

safe-area-inset mixin

Sets a property to the device safe area inset for one side, for notches and rounded screens.

@mixin safe-area-inset($property, $position)

Parameter	Type	Default	Description
$property	String	Required	CSS property to set, e.g. padding-top
$position	String	Required	Inset side (top, right, bottom, left); any other value raises an error

Example

.toolbar {
  @include safe-area-inset(padding-bottom, bottom); // padding-bottom: env(safe-area-inset-bottom)
}

Compiled CSS

.toolbar {
  padding-bottom: env(safe-area-inset-bottom);
}

Source: tools/_modern-layout.scss:98

print mixin

Wraps styles in a print media query.

@mixin print

Content block

Styles for printed output

Example

.site-nav {
  @include print {
    display: none;
  }
}

Compiled CSS

@media print {
  .site-nav {
    display: none;
  }
}

Source: tools/_modern-layout.scss:118

supports mixin

Wraps styles in an @supports query for the given declaration; pass it as a quoted string.

@mixin supports($property)

Parameter	Type	Default	Description
$property	String	Required	Declaration to test, e.g. "display: grid"; a value without a colon raises an error

Content block

Styles to apply when the declaration is supported

Example

.layout {
  @include supports("display: grid") {
    display: grid;
  }
}

Compiled CSS

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

Source: tools/_modern-layout.scss:133