klickreflex/breakpoints.js

## breakpoints.js
  // Get Breakpoints from CSS and store in `breakpoint` object
  var breakpoint = {};
  breakpoint.refreshValue = function () {
    this.value = window.getComputedStyle(document.querySelector('head'), ':before').getPropertyValue('content').replace(/\"/g, '');
  };

// Put it inside a function
var currentBreakFn = function() {
  breakpoint.refreshValue();
};

// Get the currently active breakpoint intially
currentBreakFn();
// Get the updated values on resize but use lodash's debounce for better performance
window.addEventListener('resize', _.debounce(currentBreakFn, 250));

// Example Breakpoint Checking
/*
  if (breakpoint.value == 'break-1') {
    console.log('breakpoint break-1');
  }
  else if (breakpoint.value == 'break-2') {
    console.log('breakpoint break-2');
  }
  else if (breakpoint.value == 'break-3') {
    console.log('breakpoint break-3');
  }
  else if (breakpoint.value == 'break-4') {
    console.log('breakpoint break-4');
  }
  else {
    console.log('Some other breakpoint');
  }
*/

## breakpoints.scss
// using <head> to inject content on the pseudo elelemnt
// because the body's ::before is already occupied with some other styling
head {
  &::before {
    content: 'break-0';
    display: none;

    @include breakpoint(break-1) {
      content: 'break-1';
    }

    @include breakpoint(break-2) {
      content: 'break-2';
    }

    @include breakpoint(break-3) {
      content: 'break-3';
    }

    @include breakpoint(break-4) {
      content: 'break-4';
    }
  }
}
	// Get Breakpoints from CSS and store in `breakpoint` object
	var breakpoint = {};
	breakpoint.refreshValue = function () {
	this.value = window.getComputedStyle(document.querySelector('head'), ':before').getPropertyValue('content').replace(/\"/g, '');
	};

	// Put it inside a function
	var currentBreakFn = function() {
	breakpoint.refreshValue();
	};

	// Get the currently active breakpoint intially
	currentBreakFn();
	// Get the updated values on resize but use lodash's debounce for better performance
	window.addEventListener('resize', _.debounce(currentBreakFn, 250));

	// Example Breakpoint Checking
	/*
	if (breakpoint.value == 'break-1') {
	console.log('breakpoint break-1');
	}
	else if (breakpoint.value == 'break-2') {
	console.log('breakpoint break-2');
	}
	else if (breakpoint.value == 'break-3') {
	console.log('breakpoint break-3');
	}
	else if (breakpoint.value == 'break-4') {
	console.log('breakpoint break-4');
	}
	else {
	console.log('Some other breakpoint');
	}
	*/
	// using <head> to inject content on the pseudo elelemnt
	// because the body's ::before is already occupied with some other styling
	head {
	&::before {
	content: 'break-0';
	display: none;

	@include breakpoint(break-1) {
	content: 'break-1';
	}

	@include breakpoint(break-2) {
	content: 'break-2';
	}

	@include breakpoint(break-3) {
	content: 'break-3';
	}

	@include breakpoint(break-4) {
	content: 'break-4';
	}
	}
	}