Modules
Rounded
This module helps to make rounded corners at the element.
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>