Sizing

Max Width #

Superkube has this sizing scale by default:

// =Scales
$scales: (
    sizing: (
        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 max-20 to max-100.

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

Helpers

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

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

Responsive

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

<div class="max-50 max-auto-sm">...</div>

Height #

The notation of height is look like this:

.h-{size}

The {size} is based on the sizing scale.

// =Scales
$scales: (
    sizing: (
        20: 20%,
        25: 25%,
        30: 30%,
        33: 33%,
        40: 40%,
        50: 50%,
        60: 60%,
        67: 67%,
        70: 70%,
        75: 75%,
        80: 80%,
        100: 100%
    )
);

So you can apply for elements like this:

<div class="h-25">...</div>
<div class="h-50">...</div>
<div class="h-100">...</div>

Helpers

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

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

Use the vh-full to make the viewport height of the element as 100vh.

<div class="vh-full">...</div>

Responsive

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

<div class="h-25 h-auto-sm">...</div>