Rounded

Size #

Use the $radius map to generate classes for different rounded corners.

$radius: (
    small: 2px,
    base: 4px,
    large: 12px
);

Superkube will generate such classes:

• rd-small
• rd-base
• rd-large

<div class="rd-small">...</div>
<div class="rd-base">...</div>

Of course, you can add your own size, for example:

$radius: (
    ...
    huge: 20px
    ...
);

Superkube will generate the rd-huge class with the specified rounding size.

<div class="rd-huge">...</div>

Helpers #

Use the rd-off class to turn off rounded corners at the element.

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

Use the rd-circle class to make an element circular if it has the same height and width.

<div class="rd-circle">...</div>

Behavior on small screens #

Use the rd-off-sm class to turn off rounded corners on small screens.

<div class="rd-base rd-off-sm">...</div>

Use the rd-circle-sm class to make the element round on small screens..

<div class="rd-base rd-circle-sm">...</div>