Edges

Usage #

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 your HTML:

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

Responsive #

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>