how to create breakpoint sets

Breakpoint sets can be created using Response.create(options) where options is an object (or array or objects) specifying options for the set(s). Response.create(options) can be called directly in JavaScript or implicitly by placing JSON in a data attribute on your <body> tag. Either way, each options object represents a breakpoint set. An array of objects allows you to create multiple sets at once. The advantage to using JSON is that is does not require any additional JavaScript to implement and is slightly easier to maintain. (JSON validator: jsonlint.com)

Properties

Built-in props are: "width"|"height"|"device-width"|"device-height"|"device-pixel-ratio"

It is also possible to add custom props/test using Response.addTest(prop, fn) (See the readme)

Breakpoints

If the breakpoints option is not specified, these defaults are used:

[0, 320, 481, 641, 961, 1025, 1281] // defaults for "width"|"device-width" based sets (ideal for 960 grids)

[0, 481] // defaults for "height"|"device-height" based sets

[1, 1.5, 2] // defaults for "device-pixel-ratio" based sets (!omit trailing zeros!)

Prefixes

Prefix defaults were added in 0.3.1. The default prefix for a set is based on its prop. For example if the prop was device-width then the prefix would default to device-width- and attributes of the form data-device-width-320 would be created. If a custom prefix is specified, it will override the this default. In order to back support HTML you may have already written, you can specify multiple prefixes in a space-separated string. These essentially become aliases.

Examples

Example 1

Create data-min-width-0, data-min-width-320, data-min-width-481 ... :

Response.create({ 
    prop: "width" 
});

same setup in JSON:

<body data-responsejs='{
  "create": [
      { "prop": "width" }
  ]}'
>

Example 2

Create data-r0, data-r320, data-r481 ... and data-src0, data-src320, data-src481 ... :

Response.create({ 
    prop: "width" // property to base tests on
  , prefix: "r src" // custom aliased prefixes
  , breakpoints: [0, 320, 481, 801, 1025] // custom breakpoints
  , lazy: true // enable lazyloading
});

Same setup in JSON:

<body data-responsejs='{
  "create": [{ 
       "prop": "width"
     , "prefix": "r src"
     , "breakpoints": [0, 320, 481, 801, 1025]
     , "lazy": true
  }]
}'>

Example 3

Create data-density1, data-density1.5, data-density2 ... and data-r0, data-r320, data-r481 ... :

Response.create([{ 
    // first set
    prop: "device-pixel-ratio" // property to base tests on
  , prefix: "density" // custom prefix
 },{
    // second set
    prop: "width" // property to base tests on
  , prefix: "r"  // custom prefix
  , lazy: true // enable lazyloading
}]);