Containers

A basic set of responsive container classes for wrapping content based on the Themalize breakpoints. Disabled by default, enable with $enable-containers: true; in the _configuration.scss document.

No predefined internal padding is included but can be added using the CSS variable provided or with the padding utilities if enabled, and the inline margins and max-size variables can be used to customize those properties as required.

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

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

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

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

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

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

The containers are compiled using the Sass variables provided for the breakpoints so unlike other utilities that use the breakpoints the containers don't require the individual breakpoints to also be enabled in the _configuration.scss.

_containers.scss

//  ------------------------------------------------------------
//  Containers
//  ------------------------------------------------------------
@use "../../configuration" as *;
@use "../../properties" as *;

@if $enable-containers {

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

.container-xl {
  --container-size: #{$breakpoint-xl};
}

.container-lg {
  --container-size: #{$breakpoint-lg};
}

.container-md {
  --container-size: #{$breakpoint-md};
}

.container-sm {
  --container-size: #{$breakpoint-sm};
}

.container-xs {
  --container-size: #{$breakpoint-xs};
}

} // END [if/containers]