Sizing

Width #

Superkube has this sizing scale by default:

// =Scales
$scales: (
    width: (
        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 the scale from w-20 to w-100.

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

Width off

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

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

Responsive

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>

Height #

The notation of height is look like this:

.h-{size}

The {size} is based on the Spacing scale. So you can apply for elements like this:

<div class="h-10">...</div>
<div class="h-12">...</div>
<div class="h-20">...</div>

Height off

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

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

Responsive

Use the h-off-sm class to turn off the height of the element on small screens.

<div class="h-10 h-off-sm">...</div>

If you need to change the height on mobile, you can do it by adding the suffix -sm.

<div class="h-10 h-5-sm">...</div>