Rounded

Usage #

This class syntax is used to specify rounded corners:

r-{size}
r-{side}-{size}

Where {size} is based on the scale of named radius that are specified in $scales. The default values are as follows:

// =Scales
$scales: (
    radius: (
        small: 2px,
        base: 4px,
        large: 6px,
        huge: 12px
    )
);

The {side} is an indication of the direction of the rounding:

• top
• bottom
• left
• right

Here are examples of how to use rounded classes.

<div class="r-base">...</div>
<div class="r-top-base">...</div>
<div class="r-bottom-base">...</div>
<div class="r-left-base">...</div>
<div class="r-right-base">...</div>

You can mix the direction classes.

<div class="r-top-large r-left-large">...</div>

Size #

You can add your own rounded size or override an existing one by extending $scales. See also how to work with scales for modules.

// =Scales
$scales: map-extend($scales, (
    radius: (
        base: 6px, // override
        mega: 20px // add new one
    )
));

Superkube will automatically create new size classes with the specified value.

<div class="r-mega">...</div>
<div class="r-top-mega">...</div>
<div class="r-bottom-mega">...</div>
<div class="r-left-mega">...</div>
<div class="r-right-mega">...</div>

Helpers #

Turn off

Use the r-off class to turn off rounded corners of the element.

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

Circle

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

<img class="image-64 r-circle" src="...">

Responsive #

To change the behavior of rounded corners on small screens, you need to apply the -sm suffix to the classes.

r-{size}-sm
r-{side}-{size}-sm

This works, for example, if the radius should be larger or smaller on mobile screens. Also if you want to change the rounding of the top corners on the mobile to the rounding on the left.

<div class="r-huge r-base-sm">...</div>
<div class="r-top-huge r-top-base-sm">...</div>
<div class="r-top-base r-off-sm r-left-base-sm">...</div>

Note: If you want to change the rounding direction on mobile screens, you must first turn it off by using the r-off-sm class.

<div class="r-top-base r-off-sm r-left-base-sm">...</div>

Turn off

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

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

Circle

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

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