Sizing

Scale #

Superkube has this sizing scale by default:

$width-scale: (
    20: 20%,
    25: 25%,
    30: 30%,
    33: 33%,
    40: 40%,
    50: 50%,
    60: 60%,
    67: 67%,
    70: 70%,
    75: 75%,
    80: 80%,
    100: 100%
);

As a result Superkube will generate classes based on this scale:

• w-20
• w-25
• ...
• w-80
• w-100

<div class="w-50">...</div>
<div class="w-75">...</div>
<div class="w-20">...</div>

Helper #

Use the w-off class to turn off the width of the element. Technically, this class make width: auto.

<div class="w-off">...</div>

Behavior on small screens #

Use the w-off-sm class to turn off the width of the element on small screens.

<div class="w-50 w-off-sm">...</div>