Modules

Sizing

This module has classes to specify the width of the element.

Usage #

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.

50%

75%

20%


<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>

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>