How they work #

The most fundamental layout component in UX4G is a container, which is necessary when using the built-in grid system. The purpose of containers is to protect, centralize, and occasionally pad the substance they hold. Although containers can be nested, most layouts don't call for them.

UX4G includes three distinct containers:

• At every responsive breakpoint, container sets a max-width.
• Width: 100% up until the specified breakpoint is the container-"breakpoint" property
• Width: 100% at all breakpoints for container fluid.

The comparison between each container's max-width and the original is shown in the table below across every breakpoint, container and container-fluid.

See them in action and compare them in our Grid example.

Default container #

The max-width of the default .container class varies at each breakpoint because it is a responsive, fixed-width container.

<div class="container">
  <!-- Content here -->
</div>
                                        

Responsive containers #

Until the chosen breakpoint is reached, responsive containers lets to define a class that is 100% wide; after that, apply max-widths for each of the higher breakpoints. For instance, .container-sm starts off at 100% wide and scales up to md, lg, xl, and xxl when the sm breakpoint is achieved.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
                                        

Fluid containers #

For a container that spans the entire width of the viewport, use .container-fluid.

<div class="container-fluid">
  ...
</div>

Sass #

To assist in creating the needful layouts, UX4G provides a number of predefined container classes, as demonstrated above. By changing the Sass map that drives these predefined container classes (located in _variables.scss):

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

In addition to customizing the Sass, you can also create your own containers with our Sass mixin.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}
                                        

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.