Useful plugin for responsive web designs | Bypeople

Useful plugin for responsive web designs

While we were searching for applications/tools on the internet, we found really interesting tool called Breakpoints. This tool/application is really handy while working with responsive design techniques. Take a look, and let us know what you think about it.

What is Breakpoint?

Breakpoints generally speaking are browser and/or devices sizes that you can target using responsive design techniques. Typically, breakpoints are defined at 320px wide, 480px wide, 768px wide and 1024px wide to support the full range of mobile and desktop browsers that might hit your site.

BreakPoints.JS is a jQuery plugin that creates catchable events when the browser enters and exits these size ranges, either because the browser has been resized, or the device has been rotated.  These events can be used to create or change functionality that pertains to a specific device size.

Why was Breakpoint built?

CSS Media queries provide excellent tools for adapting the design of a site at various sizes, but not for adjusting the functionality. Breakpoints.js adds this ability, allowing developers to change the way Javascript executes depending on which device it is being executed on. It also allows the developer to do more than just resize and reposition elements – new elements can be inserted, unnecessary elements can be removed, and substantial changes to the markup can be made that go beyond the capabilities of a pure-CSS solution.


Why use Breakpoint instead of some other solutions?

Unlike many other responsive design plugins, Breakpoints does not seek to solve one specific problem like adapting images or resizing fonts. Instead, it provides a framework within which any adjustments necessary can be fired automatically simply by binding to events. Breakpoints.js could be used to reflow your design using jQuery Masonry, or to resize your videos using FitVid, or a combination of both!


What’s the future for Breakpoint?

We will be extending the capabilities of Breakpoints so that in addition (or as an alternative to) triggering real events, callback functions can be specified at initialization time. This way, all of the code for all of the different states can be set up in one line of code instead of having to define several event listeners.

Who are you?

XOXCO, our company, provides application design and development services, lately specializing in HTML5 and JavasScript applications.   We are currently engaged in several large responsive design projects. BreakPoints.JS itself is a free, MIT licensed open source project.

Related Deals

Related Posts