Response is an experimental jQuery plugin for building websites with responsive content. It can dynamically swap content based on breakpoints and data attributes.

Response's most powerful feature is breakpoint sets. Using the sets, content for more-capable devices and/or larger viewports can be stored in HTML5 data attributes. Designers can create custom sets to make exactly the functionality that they want. (None are setup by default.)

Write markup like: <div data-min-width- 320 = '<img src=lo-fi.png alt="image @ 320+ viewports">' data-min-width- 961 = '<img src=hi-fi.png alt="image @ 961+ viewports">' > text-only @ <320px and no-js </div>

Or load a different src: <-- Load lo-fi.png for devices 0–640px wide or no-js .

Load hi-fi.png for devices 641px+ wide. -->

<img src = "lo-fi.png" data- min-device-width- 641 = "hi-fi.png" alt = "example" >

Breakpoints can be based on width | device-width | height | device-height | device-pixel-ratio or on custom props. Designers can use the default breakpoints (ideal for 960 grids) or specify custom breakpoints.

Using JSON as shown below is the simplest way to create sets. Sets can also be created in JavaScript using Response.create. In either case, the options are the same.

JSON setup example <body data-responsejs='{ "create": [{ "prop": "width" , "prefix": "min-width- r src" , "breakpoints": [ 0 , 320 , 481 , 641 , 961 , 1025 , 1281 ] }] }'>

Use custom breakpoints or use the default breakpoints:

width / device-width : [0, 320, 481, 641, 961, 1025, 1281]

: height / device-height : [0, 481]

: device-pixel-ratio: [1, 1.5, 2]