ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

Denote Variants in JSON #22

Open ryanve opened 11 years ago

ryanve commented 11 years ago

For Response 1.0, I think JSON may a more resilient way to denote variants in the long term, and would alleviate some of the complexity involved in defining breakpoint sets.

<img src="example-default.png" alt="default example" data-response-attr='{
    "src": {"480":"example-medium.png", "1280":"example-huge.png"}
}'>

This could also accommodate attributes other than [src]:

<img src="example-default.png" alt="default example" data-response-attr='{
    "src": {"480":"example-medium.png", "1280":"example-huge.png"}
  , "alt": {"480":"medium example",     "1280":"huge example"}
}'>

For insertions:

<div data-response-html='{"480":"example medium", "1280":"example huge"}'>
    example default
</div>

Non-numeric keys could also be used:

<div data-response-html='{"medium":"example medium", "huge":"example huge"}'>
    example default
</div>