Response
Response is an experimental jQuery/Ender/Zepto plugin that gives web designers tools for building responsive websites. It can dynamically swap content based on breakpoints and data attributes. (npm: response.js)
(0.10)
APIBreakpoint sets
Response's main feature is its breakpoint sets. They offer the ability to serve different content via breakpoint-based data attributes. They are best applied with a mobile-first approach. Devs can choose custom breakpoints to create exactly data attributes they need. By default none are setup.
Creating breakpoint sets
Sets are created either by calling Response.create(options) directly, or automatically via JSON stored in a body[data-responsejs]
.
The options can be a plain object or an array of them.
Response;
OR
To write markup like
default markup for 480px- or no-js
Extending
breakpoint set that uses a custom test
Define a custom/** * @param * @param */Response;
verge
Methods fromResponse // CSS viewport widthResponse // CSS viewport heightResponse // => booleanResponse
Device size
Response // device widthResponse // device heightResponse // calculated Math.max(deviceW, deviceH)Response // calculated Math.min(deviceW, deviceH)
devicePixelRatio
Response // true when device-pixel-ratio is 1.5+Response // true when device-pixel-ratio is 2+Response // get device-pixel-ratio - returns integer or float (0 if undetectable)
Viewport size ranges
Response // true in viewports 481px wide and up.Response // true in viewports 0-480px wide.Response // true in viewport 641px high and up.Response // true in viewports 0-640px high.
Device size ranges
Responsedevice // true for devices 481px wide and upResponsedevice // true for devices 0-480px wide.Responsedevice // true for devices 641px high and up.Responsedevice // true for devices 0-640px high.
Events
breakpoint set crossovers
Call a function onResponse Response
@deprecated
event utils
Response // call fn on readyResponse // call fn on resizeResponseactionfn|fns // call fn(s) on ready *and* on resize
@deprecated
dataset utils
Response // getResponse // get and render (See Response.render)Response // setResponse // set multiple data atts at onceResponse // delete one or more data attsResponse // sets <body data-pulp-fiction="5">Response // -> "5"Response // -> 5 Response // convert stringified primitives to correct value e.g. "true" to trueResponse // convert 'pulp-fiction' or 'data-pulp-fiction' to pulpFictionResponse // convert 'pulpFiction' to 'data-pulp-fiction'Responsetargetkeys // convert keys like "a b c" or ["a","b","c"] to $("[data-a],[data-b],[data-c]")Response // access an array of dataset values that correspond to an array of dataset keysResponse
@deprecated
object utils
Response
.noConflict()
Response // remove the global `Response`Response
AMD usage
; // define module and destroy global