Intention.js The next level in responsive design?

By , October 16th, 2013 , Tags: , , , 0 Comments

Responsive design is all the rage. Cope. In addition to media queries, exciting HTML constructs and various scripts there is now intention.js: HTML transformation for different output devices.

In simple words, and from a technical perspective it can be said that design media queries are used in Responsive to find out what resolution the site will be represented.Subsequently, any grids are moved, scaled or hidden. Made within this content grids adapt to the changing width of the elements.


In other words, if for example a smaller browser window, shrink the flexible images and superfluous elements – for example, a sidebar is hidden, while a two-or three-column layout to a single column. From a technical point of view must therefore be specified, in which breakpoints which design decisions must be made.
If the sidebar away or we shrink the . content container?

  • What happens in Landscape? We show the sidebar again or we can hide it?
  • How can we spend our images for retina display?

Intention.js in web development

Intention.js is a toolkit for Responsive design, and offers you an easy way to make restructure HTML for different devices. Impressive is that you can specify in the HTML, such as the DOM changes on different devices.

Put simply, you write in HTML a “template” and you are back intention.js specific HTML per resolution. Especially with the restructuring of DOM objects intention.js is just great. Thus Responsive design is no longer abstract but clear and easy to understand.

Various Darstellungsvariaten with different devices can be easily implemented. On the desktop you want your gallery can be represented as tiles, the tablet you want a full-screen and touch-enabled smartphone on the slideshow and you want all images to each other at 100 percent of the device-width? All this is no problem for intention.js.

How intention.js work?

This system can easily be thought of as like having two columns. The first pillar, consisting of so-called thresholds, defines the context in which a site is shown. Examples are: How wide is the viewport? Touch functionality is needed? Portrait or Landscape?

The second pillar is the manipulation of HTML attributes. Three different methods can be distinguished.

Manipulation of the CSS class

The simplest method is to manipulate the CSS class

is to:


Manipulation of HTML attributes

This method offers a more specific manipulation than the previous method. It defines a base value, which is then adapted for a particular case. From the following snippet

is specifically for devices with Retina resolution:

This applies to all other resolutions:

The method “attribute manipulation” can also be used in conjunction with the manipulation of CSS classes. An example of this would be:

This snippet is from a corresponding CSS class for mobile devices, tablets, and desktop resolutions.

Manipulation of the document tree

The “placement manipulation,” the DOM allows you fundamental to be restructured for different devices.

This example makes the navigation per unit output to a different location:

Smartphone: The navigation is located on the footer .
Tablet: The navigation is located under the section .
Everything else: The navigation is located under the header .

Intention.js in use

The system relies on jQuery and Underscore.js. Intention.js minified needed only seven kilobytes, while all modern browsers support (up to IE 8). The next example shows you a little more extensive, as you can make generate three different source code from an HTML file.

As you can see, the href attribute in links can be addressed. Let’s look at the issue on an iPhone 5 at:

I especially like that the navigation has become touch-friendly – with one line of code. As is the representation of the image for retina displays. I like better so this proposed approach a native support  for “responsive images”:

The output of the same code on a tablet looks like this:

However, for desktop computers in the same site will be displayed as:

So you can with relatively little additional HTML markup very specific work for different resolutions or devices. But intention.js offers even more!

As already mentioned, is responsive to intention.js different predetermined intention.js of contexts. But they can also be defined yourself. This allows you to change the web project “live”, based on the scrolling behavior, the page views or time of day.

Example: In the following HTML snippet is given.

The corresponding context looks like this:

So that content can be presented depending on the time now. But how exactly does one own context or “Custom Axis” on?

Build a “Custom Axis” and the context

The structure consists of two different properties and functions. Briefly, an “axis” a measurable object or a collection of information, the context-group defines the units.Here, the entire construct:



Intention.js is interesting. Very much so. Can it revolutionize responsive design? Not likely in small web projects. But for larger projects I see some advantages, just convinced the simple restructuring of the DOM and the easy handling me. Of course – with UI systems such as bootstrap, you can create similar functionality, but also so fast and so complex? In intention.js it’s also not about UI, it’s about to deliver a different approach to responsive design – and that has it, also made in my opinion.

Special mention is the intention.js Documentation . The code is partially explained line by line, what makes you to start very simple. Take a look at the demos and convinced yourselves intention.js Will you use for your web projects?

I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.