Harvey

Adding a second face to your application's JavaScript

Why do I Need Harvey? Hint: media queries aren't good enough.

A state manager for CSS media queries

Media queries are great for visual tweaks and simple behavioral switches, but they become difficult to rely on when behaviors change for larger or smaller devices. Harvey helps you monitor and manage those changes by firing an event whenever your media query is activated.

This method is preferable to relying on a screen resize event because you only receive an event when the query is matched -- not for every screen resize. Less testing and more doing.

Like the Ronco® Roaster, just “Set it and Forget it”

Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
  setup: setup_function, // called when the query becomes valid for the first time
  on: on_function, // called each time the query is activated
  off: off_function // called each time the query is deactivated
});

Enough talk, time for show.

Harvey was built for WalkaboutNYC, a free event in NYC that lets you explore NYC's finest tech companies. You can see it in action by viewing the site and resizing your browser. Note that some functionality changes as the browser scales.

To see it in action on this page, resize your browser and watch the apple device on the right change (to the most appropriate device for your resolution). You can see the currently active media query on the left:

Watch these:

Where to Get it

On GitHub, of course:
https://github.com/harvesthq/harvey

Please direct all feedback, questions and issues to the issue management section.

Harvey Credits