How to use Intention.js for Responsive Design

How to use Intention.js for Responsive Design Design & Development

Jarrod Medrano Mar 11 2014

When developing responsive websites, you will inevitably encounter designs that require some kind of HTML reordering. Often this arbitrary reordering can be achieved through clever CSS tricks, but if that is not possible or practical, you may end up having to do some kind of javascript to sniff for browser widths.

Enter Intention.js. Intention.js is a small but powerful script developed by Dow Jones. If you are stuck with a design that requires a lot of dynamic restructuring, this tool will save you a lot of headaches.

Dependencies

To use intention.js, you will need jQuery, Underscore.js, and context.js. (Context.js is optional, depending on whether or not you want to create your own contexts). Once you include these scripts, you are ready to go!

Example 1: Reordering

Say you have a design where the top navigation has to move to the bottom of the page, right above the footer, but only on phones. With CSS you’d have to do some kind of absolute positioning to achieve this. But with Intention.js, you just do something like this:

<nav data-intent data-in-mobile-prepend=".footer"></nav>

On your mobile breakpoint the navigation will be moved from the top of the page to above the footer.

View an animated gif example.

View an animated gif example.

See example

Example 2: Changing Classes

Changing classes is just as simple. If you want to change the body class on different screen widths, you can do it like so:

<body data-intent data-in-mobile-class="red" data-in-tablet-class="blue" data-in-standard-class="green">
View an animated gif example.

View an animated gif example.

See Example

Example 3: Changing Attributes

Intention.js also responds to changes in screen resolution.

For example if you want to change an image for retina screens, you can do this:

<img alt="car" data-intent data-intent-base-src="images/car.jpg"
   data-intent-highres-src="images/car-retina.jpg" width="525" height="350"/>

See Example

Example 4: Creating your own Contexts

If you’d like to create your own breakpoints, Intention.js has you covered. The Intention.js documents go into great detail on how to do this, so I’ll keep it simple. Here is an example of some custom contexts that you can use in any practical application:

var intent = new Intention();
var horizontal_axis = intent.responsive({
   ID: 'width',
   contexts: [
      {name:'standard', min:980}, 
      {name:'tablet', min:768},
      {name:'mobile', min:0}
   ],
   matcher: function(measure, context) {
      return measure >= context.min;
   },
   measure: function() {
      return $(window).width();
   }
});
horizontal_axis.respond();

$(window)
.on('resize', horizontal_axis.respond);

window.intent = intent;

$(function() {
   intent.elements(document);
});

Now that I have created my context and everything is working, I can begin manipulating elements without even touching the html. For example, if I want to collapse the sidebar on mobile:

intent.on('mobile', function() {
   if ( $('.sidebar-collapse').hasClass('in') ) {
   	$('.sidebar-collapse').removeClass('in');
   }

Let’s say I want to arbitrarily move the advertisement around. I can add a function for each breakpoint:

intent.on('standard', function() {
   $('.commercial').insertBefore('.footer');
});
intent.on('tablet', function() {
   $('.commercial').insertBefore('.footer');
});
intent.on('mobile', function() {
   $('.commercial').insertBefore('#sidebar');
});
View an animated gif example.

View an animated gif example.

See Example

And More

Intention.js can respond to almost any change in your screen. It can listen for orientation (landscape versus portrait), scrolldepth, and even time changes. It’s worth noting that you shouldn’t rely on javascript for coding your responsive designs, but when CSS fails, it’s nice to have something to fall back on. What workarounds do you use when CSS is not enough? Let us know in the comments.