Detecting or syncing CSS media-queries or breakpoints with Javascript

Lightweight and easy-to-use plugin for Javascript media-queries detection. Includes automated functions management to assign functions to specific breakpoints.

Download at GitHubDemo

DOWNLOAD FROM NPM

npm install breaky --save

SET-UP

Incude: breaky.js

<script href="breaky.js"></script>

CSS: Use the pseudo-element :before and property content on the HTML to list the breakpoints for Breaky to detect. Each breakpoints’ name must be separated by commas and in order from smallest to largest viewport. Name it anything and set as many breakpoints as you want.

html:before {
	content: "mobile,tablet,desktop";
	display: none;
}

Use the pseudo-element :before and property content on the BODY set media-queries for Breaky to detect. It should follow the same naming convention as the list set in the HTML.

body:before {
	display: none; 
}
@media (min-width: 320px) {
	body:before {
		content: "mobile";
	}
}
@media (min-width: 768px) {
	body:before {
		content: "tablet";
	}
}
@media (min-width: 960px) {
	body:before {
		content: "desktop";
	}
}

ASSIGNING FUNCTIONS TO BREAKPOINTS

JS: There are four Breaky methods to utilize when assigning functions to one or a series of breakpoints: at,above, below, and between.

Assign a function to one breakpoint: at()

breaky.at("mobile", function() {
	// custom logic
});

Assign a function to and below a breakpoint: below()

breaky.below("desktop", function() {
	// custom logic
});

Assign a function to and above a breakpoint: above()

breaky.above("mobile", function() {
	// custom logic
});

Assign a function between breakpoints: between()

breaky.between("mobile", "tablet", function() {
	// custom logic
});