Container mixins

Centered, full-width containers whose max-width steps up at each breakpoint.

Classes:

• container: Full width, centered, with block padding and a max-width per breakpoint
• container.flex/container.grid: The same container with display flex or grid (needs the flex or grid feature flag)

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

Source: layouts/_container.scss

Mixins

container-base container-padding container

container-base mixin

Makes an element full width and centers it on the inline axis (margin-inline: auto).

@mixin container-base

Example

.page {
  @include container-base;
  @include max-width(1200px);
}

Compiled CSS

.page {
  width: 100%;
  margin-inline: auto;
  max-width: 1200px;
}

See also: container. Source: layouts/_container.scss:27

container-padding mixin

Sets padding-top and padding-bottom to the same spacing value.

A unitless number that is not a spacing key, or a negative key, raises @error.

@mixin container-padding($padding)

Parameter	Type	Default	Description
$padding	Number|Length	Required	A $spacings key (4 gives var(--wu-space-4)) or a value with units, passed through raw

Example

.section {
  @include container-padding(8); // padding-top and padding-bottom: var(--wu-space-8)
}

Compiled CSS

.section {
  padding-top: var(--wu-space-8);
  padding-bottom: var(--wu-space-8);
}

See also: container, py. Source: layouts/_container.scss:42

container mixin

Builds a centered, full-width container whose max-width steps up at each breakpoint (breakpoint width minus 100px), with block padding of spacing key 4 (top and bottom only).

100px is subtracted from each breakpoint width; an em or rem breakpoint gives calc(40em - 100px).

@mixin container($display: block)

Parameter	Type	Default	Description
$display	String	block	Display value: block, flex, grid, inline-block, inline-flex, inline-grid, flow-root, a CSS-wide keyword or var(); anything else raises an error

Example

.page {
  @include container;
}
.page-grid {
  @include container(grid);
  @include cols(12);
}

Compiled CSS

.page {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--wu-space-4);
  padding-bottom: var(--wu-space-4);
}
@media (min-width: 480px) {
  .page {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .page {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .page {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .page {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .page {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .page {
    max-width: 1436px;
  }
}

.page-grid {
  display: grid;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--wu-space-4);
  padding-bottom: var(--wu-space-4);
}
@media (min-width: 480px) {
  .page-grid {
    max-width: 380px;
  }
}
@media (min-width: 640px) {
  .page-grid {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .page-grid {
    max-width: 668px;
  }
}
@media (min-width: 1024px) {
  .page-grid {
    max-width: 924px;
  }
}
@media (min-width: 1280px) {
  .page-grid {
    max-width: 1180px;
  }
}
@media (min-width: 1536px) {
  .page-grid {
    max-width: 1436px;
  }
}
.page-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

See also: container-base, container-padding. Source: layouts/_container.scss:66