Breakpoints

roolith css is mobile first! See how grid system works across multiple devices.

SASS

Reference from mixin/_breakpoint.scss

$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px,
);

Usage in SASS

Apply style for all screens

.selector {
    color: blue;
}

Apply style from medium breakpoint

.selector {
    color: blue;

    @include breakpoint(medium-up) {
        color: black;
    }
}

Apply style from large breakpoint

.selector {
    color: blue;

    @include breakpoint(medium-up) {
        color: black;
    }

    @include breakpoint(large-up) {
        color: green;
    }
}

Apply style into large breakpoint

@include breakpoint(large-up) {
    .selector {
        color: blue;
    }
}

Breakpoint mixin support more handy syntax -

@include breakpoint(breakPointName) {

}

Where breakPointName can be small-only, medium-up, medium-only, large-up, large-only, xlarge-up, xlarge-only and xxlarge-up

Example usage:

@include breakpoint(medium-only) {
    // style applies for medium device only
}