Media query mixins

Media query mixins that take a breakpoint name or a length.

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

Source: tools/_media-queries.scss

Mixins

media-up media-down media-between media-only

media-up mixin

Applies styles from the given breakpoint width upward (min-width media query, no screen and).

@mixin media-up($breakpoint, $debug: null)

Parameter	Type	Default	Description
$breakpoint	String|Number	Required	Breakpoint name from $breakpoints (xs, sm, md, lg, xl, 2xl) or a length such as 800px; a unitless number that is not a name raises an error
$debug	Any	null	Unused

Content block

Styles to apply at and above the breakpoint

Example

.sidebar {
  @include media-up(lg) {
    display: block;
  }
}

Compiled CSS

@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

See also: media-down, media-between, media-only. Source: tools/_media-queries.scss:24

media-down mixin

Applies styles below the given breakpoint (max-width of the breakpoint minus 0.02px).

@mixin media-down($breakpoint)

Parameter	Type	Default	Description
$breakpoint	String|Number	Required	Breakpoint name from $breakpoints or a length such as 800px

Content block

Styles to apply below the breakpoint

Example

.sidebar {
  @include media-down(md) {
    display: none;
  }
}

Compiled CSS

@media (max-width: 767.98px) {
  .sidebar {
    display: none;
  }
}

See also: media-up. Source: tools/_media-queries.scss:40

media-between mixin

Applies styles from the lower breakpoint up to just below the upper breakpoint (upper minus 0.02px).

@mixin media-between($lower, $upper)

Parameter	Type	Default	Description
$lower	String|Number	Required	Lower breakpoint name or length (inclusive)
$upper	String|Number	Required	Upper breakpoint name or length (exclusive)

Content block

Styles to apply inside the range

Example

.grid {
  @include media-between(sm, lg) {
    grid-template-columns: repeat(2, 1fr);
  }
}

Compiled CSS

@media (min-width: 640px) and (max-width: 1023.98px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

See also: media-up, media-down. Source: tools/_media-queries.scss:58

media-only mixin

Applies styles only between the given breakpoint and the next larger one (minus 0.02px); the largest breakpoint has no upper limit.

@mixin media-only($breakpoint)

Parameter	Type	Default	Description
$breakpoint	String|Number	Required	Breakpoint name from $breakpoints (2xl may be unquoted) or a length in the breakpoint unit (px by default), such as 800px; a length in another unit raises an error

Content block

Styles to apply within that breakpoint range

Example

.hero {
  @include media-only(md) {
    padding-inline: 2rem;
  }
}

Compiled CSS

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero {
    padding-inline: 2rem;
  }
}

See also: container-only. Source: tools/_media-queries.scss:79