Breakpoints Framework

_breakpoints.scss

/*==============================================================================

  Breakpoints

==============================================================================*/

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

$there-is-no-higher-breakpoint: 9999em;

$allowed-breakpoint-targets: inspect(map-keys($breakpoints));

@function get-breakpoint($target, $is-max-width: false) {
    $breakpoint: map-get($breakpoints, $target);

    @if $breakpoint == null {
        @warn("You tried to respond_to '#{$target}'. Please use one of these available breakpoints - #{$allowed-breakpoint-targets}");
    }

    @if $is-max-width {
        $breakpoint: $breakpoint - 1;
    }

    @return $breakpoint;
}

@function get-next-breakpoint($target) {
    $possible-nexts: ();
    $next-breakpoint: null;

    @each $breakpoint, $value in $breakpoints {
        @if $breakpoint == $target or length($possible-nexts) > 0 {
            $possible-nexts: append($possible-nexts, $breakpoint);
        }
    }

    @if length($possible-nexts) > 1 {
        $next-breakpoint: nth($possible-nexts, 2);
        @return (map-get($breakpoints, $next-breakpoint) - 1px);
    }

    @return $there-is-no-higher-breakpoint;
}

@mixin when-wider-than($target) {
    @media screen and (min-width: get-breakpoint($target)) {
        @content;
    }
}

@mixin when-less-than($target) {
    @media screen and (max-width: get-breakpoint($target, true)) {
       @content;
    }
}

@mixin when-on($target) {
    @media screen and (min-width: get-breakpoint($target)) and (max-width: get-next-breakpoint($target)) {
        @content;
    }
}

// Create psuedo elements for JS to read so that JS can react differently at different breakpoints

@each $key, $value in $breakpoints {

    @if $key == small {
        body:after {
            display: none; /* Prevent from displaying. */
            content: "#{$key}";
            position: fixed;
            left: 0;
            bottom: 0;
            font-size: 48px;
            background-color: $black;
            color: $white;
            padding: 20px;
            z-index: 10000;
            border-top-right-radius: 8px;
        }
    }

    @else {
        @include when-wider-than($key) {
            body:after {
                content: "#{$key}";
            }
        }
    }

}

breakpoints.js

let $ = jQuery;

class Breakpoints {

    constructor() {
        this._current = null;

        $(window).resize(() => this.refreshValue()).trigger('resize');
    }

    refreshValue() {
        this._current = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/\"/g, '');
    }

    get current() {
        return this._current;
    }

}

let breakpoints = new Breakpoints();

module.exports = breakpoints;

/*
    for example:

    let breakpoints = require('breakpoints');
    if(breakpoints.current == 'large') {
        alert('This is the large breakpoint');
    }
*/