cubiclabs / breakdance-js

JavaScript defined breakpoints that can be used to trigger events and control CSS renders.

breakdance

JavaScript defined breakpoints that can be used to trigger events and control CSS renders.

The thinking here is that you can:

1. Use these events to initiate or destroy interface elements depending on the size of the screen or as a browser window resizes either due to a change in font size, orientation or the user dragging a browser edge to resize, etc.
2. Use the CSS classes as a shorthand for media queries.

You can view an example to see this working.

Setup

breakdance does not have any dependancies - simply insert it into your document head

<script src="breakdance-2.0.2.min.js" type="text/javascript"></script>

Breakpoints

There are some default breakpoint values defined:

Name	Min Width	Max Width
mobileSmall	0	479
mobile	0	690
tablet	691	865
default	866	1000
large	1001	-

You can define breakpoints using the setBreakpoint() method like so:

breakdance.setBreakpoint({
	"mobileSmall": 	[0,479],
	"mobile": 		[0,690],
	"tablet": 		[691,865],
	"default": 		[866,1000],
	"large": 		[1001]
});

This method takes a single argument which is an object that defines the breakpoints:

{
	"breakpointName1": [minWidth, maxWidth],
	"breakpointName2": [minWidth, maxWidth],
	"breakpointName3": [minWidth]
}

Events

The following events get triggered:

• [breakpointName]On - triggered when a breakpoint becomes active
• [breakpointName]Off - triggered when a breakpoint becomes inactive
• breakpoint - triggered when a breakpoint event above occurs

These can be used in the following way:

breakdance.on("mobileOn", function(){
	initMobile();
});

breakdance.on("mobileOff", function(){
	destroyMobile();
});

breakdance.on("breakpoint", function(){
	console.log(breakdance.is("mobile"));
});

CSS Body Class

In addition to firing JavaScript events, a class gets added to the body element that represents the currently active breakpoint/s. This lets you use class names to change the behaviour of elements if you wish:

.testBox{background: white;}
.mobile .testBox{background: red;}
.tablet .testBox{background: orange;}
.large .testBox{background: green;}