Container

Named #

Superkube automatically generates containers specified in vars/scales in $containers map.

This is how a map with containers can look like:

$containers: (
    small: 400px,
    medium: 800px,
    base: 1200px,
    large: 100%
);

As a result Superkube will generate the following classes:

• container-small
• container-medium
• container (base)
• container-large

<div class="container">...</div>
<div class="container-medium">...</div>
<div class="container-large">...</div>

Each container gets the max-width property specified in variables. For example, for a base container the generated class may look like this:

.container {
    max-width: 1200px;
}

The class of container can be mixed with other modules or blocks inside them.

<div class="item container-medium">
    <div class="item-head">...</div>
    <div class="item-body container-small">...</div>
</div>

To add your container size, you need to specify it in the $containers map:

$containers: (
    ...
    form: 450px
    ...
);

Superkube will generate a container with class container-form:

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

Columns #

The width of the containers can be specified by the number of columns. The number and parameters of columns are defined in $grid map in vars/grid. By default, there are 12 columns with gutter of 6rem between them.

$grid: (
    ...
    columns: 12,
    gutter: 6rem
    ...
);

Superkube will generate containers based on the number of columns and gutter between them. In the end you can use them like this:

<div class="container-1">...</div>
<div class="container-2">...</div>
...
<div class="container-12">...</div>

Edges #

Containers may have padding at the edges. This is specified in the $edges map in your vars/scales. This may look like this:

$edges: (
    base: 5rem
);

Superkube will generate the necessary classes to specify the size of the container edges. This means that by applying these classes you will set padding-left and padding-right on the container.

<div class="container edges">...</div>

You can add your own padding size at the edges like this:

$edges: (
    base: 5rem,
    large: 8rem
);

And use it in HTML:

<div class="container edges-large">...</div>

edges off

Padding at the edges can be disabled by the edges-off class. For example, if padding-left and padding-right are specified in the SCSS of a module or block.

<div class="item edges-off">...</div>

Centered #

With the module Centered you can center the container horizontally:

<div class="container centered">...</div>

Behavior on small screens #

All containers on small screens become 100% wide, i.e. the max-width property becomes none.

edges

You can control how padding-left and padding-right will be set for the container by adding the suffix -sm on small screens.

• edges-off-sm — turns off edges on small screens;
• edges-sm (base) — turns on edges with the base size;
• edges-{size}-sm — turns on a custom defined edges, e.g. edges-large-sm.

<div class="container edges edges-off-sm">...</div>
<div class="container edges-large edges-sm">...</div>