Containers

A basic set of content container utilities, can be customized with variables inline.

Examples

Use the .container utility with no size values to create custom containers inline.

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  inline-size: 100%;
  max-inline-size: var(--size);
  margin-inline: var(--mx, auto);
  padding-inline: var(--px);
}

.container-xl {
  --size: 1600px;
}

.container-lg {
  --size: 1280px;
}

.container-md {
  --size: 1024px;
}

.container-sm {
  --size: 768px;
}

.container-xs {
  --size: 480px;
}

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
@include containers-css;

Using the framework

Enable the module in the sassmods-system.scss document as below.

$enable-containers: true;

Source

The source code is a self-contained Sass document that compiles the style module as a Sass mixin.

Source

// ---------------------------------------------------------- 
// Containers
// ----------------------------------------------------------

@mixin containers-css {

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  inline-size: 100%;
  max-inline-size: var(--size);
  margin-inline: var(--mx, auto);
  padding-inline: var(--px);
}

.container-xl {
  --size: 1600px;
}

.container-lg {
  --size: 1280px;
}

.container-md {
  --size: 1024px;
}

.container-sm {
  --size: 768px;
}

.container-xs {
  --size: 480px;
}

} // end containers-css