Documentation
Basic
Extended
Blocks

Breakpoints

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

small (<640px) medium (>=640px) large (>=1024px) xlarge (>=1200px) xxlarge (>=1400px)
Class prefix .small- .medium- .large- - -
Class prefix (css grid) .sm- .md- .lg- - -
Container width (max) max width 1200px
Total column 12
Gutter 20px 20px 20px - -


SASS reference
$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px,
) !default;
Usage in SASS

Apply style for all screens

.selector {
    color: blue;
}

Apply style from medium breakpoint

@use "./path/to/node_modules/roolith-css/src/sass/mixin";

.selector {
    color: blue;

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

Apply style from large breakpoint

@use "./path/to/node_modules/roolith-css/src/sass/mixin";

.selector {
    color: blue;

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

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

Apply style into large breakpoint

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

Breakpoint mixin support more handy syntax - 

@include mixin.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 mixin.breakpoint(medium-only) {
    // style applies for medium device only
}