Some useful css classes and sass mixins ships with roolith css out of the box.
| Utility class name | What it does |
|---|---|
.full-width |
Make element's width 100% |
.text-center |
Align text / element center |
.text-right |
Align text / element to right |
.text-left |
Align text / element to left |
.float-left |
Float left an element |
.float-right |
Float right an element |
.show-small-only |
Show element for only small viewport |
.hide-small-only |
Hide element for only small viewport |
.show-medium-only |
Show element for only medium viewport |
.show-medium-up |
Show element from medium viewport |
.hide-medium-only |
Hide element for only medium viewport |
.hide-medium-up |
Hide element from medium viewport |
.show-large-up |
Show element from large viewport |
.hide-large-only |
Hide element for large viewport |
.show-xlarge-only |
Show element for only xlarge viewport |
.show-xlarge-up |
Show element from xlarge viewport |
.hide-xlarge-only |
Hide element for only xlarge viewport |
.show-xxlarge-only |
Show element for only xxlarge viewport |
.show-xxlarge-up |
Show element from xxlarge viewport |
.hide-xxlarge-up |
Hide element from xxlarge viewport |
| Utility name | What it does |
|---|---|
rem(14) |
PX to rem. Example usage - font-size: rem(14); |
@include abs-pos(rem(10), rem(10)); |
Position absolute an element $top: auto, $right: auto, $bottom: auto, $left: auto |
@include border-radius(rem(10)); |
Add border radius to an element |
@include border-top-radius(rem(10)); |
Add border top radius to an element |
@include border-right-radius(rem(10)); |
Add border right radius to an element |
@include border-bottom-radius(rem(10)); |
Add border bottom radius to an element |
@include border-left-radius(rem(10)); |
Add border left radius to an element |
@include breakpoint(breakpointName) { } |
Add style for small, medium, large, xlarge, xxlarge breakpoint |
@include clearfix(); |
Clear an element |
@include image-2x($image, $width, $height); |
For retina image image-2x($image, $width, $height) |
@include opacity(0.5); |
Used for increase or decrease element's opacity |
@include text-truncate(); |
Truncate text of a element |
@include transition('background, color'); |
Apply transition to element |
@include triangle(down, rem(5)); |
Add triangle to element |
@include nice-scroll($trackColor: #f1f1f1, $scrollbarColor: #dddddd); |
It removes webkit default scroll bar and add custom scroll bar style |
roolith css has css animation class which you may wanna use. Element need to have animation class in order to animate. And transition classes are fadeInUp, fadeIn, fadeOut, fadeInLeft and fadeInRight
<div class="animation fadeInUp"></div>If you are using SASS
@extend .animation, .fadeInUp;