Responsif.js: A Library For Responsive DOM Updates

An article by David Brooks on November 5, 2014

 

I work a lot with responsive design and occasionally have to move DOM elements around based on the type of device. It’s senseless to write the same code over and over, so I finally bundled it all in a reusable package and called it “Responsif.”

What does Responsif.JS do?

It’s pretty simple, actually. It loads a tiny invisible div on your page and then watches how it responds to media queries. The result is a device-type detection that gives you classes for desktop, tablet, and mobile.

Why is that helpful? I’ve been a long-time fan of the Unsemantic grid system, which gives me the ability to extend classes throughout my CSS. But sometimes I need one more step, which is to hide or show things based on device type. So, I can do things like:

.responsive_desktop {
    .that_thing {
        display: none;
    }
}

But wait, there’s more!

Not only do you get the body classes, but it also watches for window resizing. If things switch up, it re-assigns the classes. You can even assign functions to the resizing.

When is that useful? Sometimes I need to fire a JavaScript function if the person is browsing on a certain kind of device. So maybe there’s a certain set of ad tags that I need to display on the desktop version. Or more likely, a column equalizer.

Here are a couple examples:

Want to load something only for desktop users? Try this:

$(’document’).ready(function () {
    var state_test = responsive.run_test();
    if (state_test === ‘desktop’) {
        // Load that desktop stuff! 
    }
});

Or, let’s say you want to move the navigation around? Try this:

$('document').ready(function(){
    window.onresize = function () {
        if ($('body').is('.responsive_desktop, .responsive_tablet')) {
            // Move your navigation for desktop and tablet users
        } else {
            // Move your navigation for mobile users
        }
    };
}); 

Why not just device-check in JavaScript?

Responsif is super-light. There’s almost nothing to it. Some people will do a check like:


var windowsize = $window.width();
if (windowsize <= 480) { 
    // do stuff
}

The frustration for me is that it's often not that simple in the real world. What if I want it to do five different things, depending on your resolution? (Maybe show one thing if you're on mobile and tablet, but I have to hide that for desktop and display another thing.) You'll end up with a bunch of code blocks that get messy and are a pain to maintain. Being able to offload that to CSS is nice. It leaves me with only the tasks that JavaScript ought to do. Things like firing JavaScript functions.

I don't want to make it sound like I use this on every project. But there are times when it comes in handy as a fallback.

You can grab the script over at Github, and I’ll have more documentation and examples at some point in the future.

Get articles from me, right in your inbox.

(I promise, no spam.)

Categorised in: ,

When My Daughter Met The Queen

A Photo of David Brooks
About David Brooks

David Brooks is the owner of the small creative studio, Northward Compass, based out of Orlando, Florida. He writes electronic and ambient music as Light The Deep, and fantasy stories about a place called Elerien.

© Copyright 2005 - 2018 David N Brooks. All rights reserved.