Container

Named #

Superkube automatically generates containers specified in $scales map.

container: (
    small: 400px,
    content: 800px,
    medium: 1000px,
    base: 1112px,
    large: 1240px,
    full: 100%
)

As a result Superkube will generate the following classes for containers:

• container-small
• container-content
• container-medium
• container (without suffix for base size)
• container-large
• container-full

You can use them to wrap the content, modules and set them to their maximum width.

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

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

.container {
    max-width: 1112px;
}

The container can be mixed with modules or submodules inside them.

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

Add container

To add your container size, you need to extend the $scales map.

// Scales
$scales: map-extend($scales, (
    container: (
        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 params. By default, there are 12 columns with gutter of 6rem between them.

// =Scales
$scales: (
    grid: (
        gridname: grid,
        columnname: column,
        columns: 12,
        gutter: 8rem,
        gap: 8rem
    )
);

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-11">...</div>
<div class="container-12">...</div>

Edges #

Containers may have padding at the edges. This is specified in the $scales map. By default, the left and right padding for the container edges is 5rem.

edge: (
    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>

Add edge

You can add your own padding size at the edges extending the $scales map.

// Scales
$scales: map-extend($scales, (
    edge: (
        large: 8rem
    )
));

Use it in HTML.

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

Centered #

Use the Centered helper to make the container horizontally centered.

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

Crop #

Use the container-crop modifier to make the container with overflow: hidden.

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

Responsive #

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

For edges you can control how padding-left and padding-right will be set for the container by adding the suffix -sm on small screens or -md for tablet.

• edges-off-sm — turns off edges on small screens;
• edges-off-md — turns off edges on tablet screens;
• edges-sm (base) — turns on edges with the base size;
• edges-md (base) — turns on edges with the base size;
• edges-{size}-sm — turns on a custom defined edges, e.g. edges-large-sm.
• edges-{size}-md — 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>