JSFiddle - React, Tailwind, and code Playground

by cfree

HTML

<div class="breakpoint-context"></div>

SCSS

// Breakpoints

$small-min: 480px;
$medium-min: 760px;
$large-min: 1025px;

// Media Query Mixin

@mixin breakpoint($bp) {
	@media (min-width: $bp)  { @content; }
}

// Breakpoint indicator

.breakpoint-context {
    background: tomato;
    height: 100px;
    width: 100px;

	@include breakpoint($medium-min) {
        background: green;
	}
	@include breakpoint($large-min) {
        background: purple;
	}
}

JavaScript

(function($) {

	window.Site = {
		$challengeElement: null,
		context: null,

		init: function() {
			/**
			 * Requires jquery.placeholder.min.js
			 * Add support for placeholder attribute in older browsers.
			 */
			$('input[placeholder]').placeholder();

			/**
			 * Set the initial breakpoint context
			 */
			this.$challengeElement = $('.breakpoint-context');
			this.challengeContext();

			/**
			 * Check breakpoint context on window resizing
			 * Throttled for better performance
			 */
			//console.log(this.context);
		},
		/**
		 * Device targeting should be based on media queries in CSS,
		 * We do not define this in scripts
		 */
		challengeContext: function() {
			console.log(this.$challengeElement.css('zIndex'));

			if (this.$challengeElement.css('z-index') == 3) {
				this.context = 'desktop';

			}
			else if (this.$challengeElement.css('z-index') == 2) {
				this.context = 'tablet';
			}
			else if (this.$challengeElement.css('z-index') == 1) {
				this.context = 'mobile';
			}
		}
	};

	$(document).ready(function() {
		Site.init();
	});

})(jQuery);