Documentation

Overview

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

▼

Setup

The setup.

Create data attribute sets:

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,320,481,641,961,1025,1281], 
      "mode": "src", "prefix": "src" }, 
    { "breakpoints": [0,320,481,641,961,1025,1281], 
      "mode": "markup", "prefix": "r" }
    ]}'
>

Usage

Examples

src mode

src mode ▰ applies to elements that use the src attribute.

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

markup mode

markup mode ▰ applies to elements that support inner markup.

<-- Keep default when viewport is <320px wide or no-js. 
    Load data-r320 when viewport is 320–960px wide. 
    Load data-r961 when viewport is 961px+ wide. --> 

<div data-r320="markup @ 320+" data-r961="markup @ 961+">default</div>

markup mode ▰ in markup mode, full-on HTML markup can be swapped.

<div 
    data-r320='<img src="lo-fi.png" alt="image @ 320+" />' 
    data-r961='<img src="hi-fi.png" alt="image @ 961+" />'
> 
    <a href="lo-fi.png">link @ <320px and no-js</a>
</div>

markup mode escape quotes in data attributes as needed!

GOOD: data-r0="<a id='myid'>here is text</a>"
GOOD: data-r0="<a id=&quot;myid&quot;>here's text</a>"
GOOD: data-r0='<a id="myid">here&#039;s text</a>'
FAIL: data-r0='<a id="myid">here's text</a>'

The markup mode is the more versatile mode.

Methods

Response offers useful booleans for quickly testing screen properties that matter when building responsive websites.

Booleans

Response.band(min, max)

/*
Response.band() tests if a min/max-width breakpoint range is active.
@supports all JavaScript-enabled browsers.
@param min (number) is a min-width in pixels. (required)
@param max (number) is a max-width in pixels. (optional)
*/

Response.band(481)    // true in viewports 481px wide and up.
Response.band(0, 480) // true in viewports 0-480px wide.

Response.dpr(ratio)

/*
Response.dpr() tests if a given device-pixel-ratio is active.
@supports Webkit, Android, Opera (Presto 2.8+), Gecko/Firefox.
@param ratio (decimal) is the device-pixel-ratio to test for.
*/

Response.dpr(1.5) // true when device-pixel-ratio is 1.5+
Response.dpr(2)   // true when device-pixel-ratio is 2+

Hooks

Response.action(name)

/*
Response.action() is a hook for calling functions on both the ready and resize events.
@supports all JavaScript-enabled browsers.
@param name (functionName -or- array)
*/

var myFunc1 = function() {/*do stuff*/};
var myFunc2 = function() {/*do stuff*/};

Response.action(myFunc1);            // call myFunc1() on ready/resize
Response.action(myFunc2);            // call myFunc2() on ready/resize
Response.action([myFunc1, myFunc2]); // call myFunc1(), myFunc2() ...