The API is pretty clunky at the moment, but necessarily so.
For specific graphs, the API could be simplified to something like:
css = rig.passthrough block, config, [{
selector: '#background'
query: '(max-width: 503px)'
width: 400
}]
For simple media query breakpoints with the same selector, the API could be something like:
css = rig.breakpoints block, config, graph, params,
selector: '#background'
breakpoints: [504, 1008]
widths: [500, 1000, 1200] # or heights
This means that the 500px width image would be used for the media queries like so:
@media (min-width: 503px) { /* 500px wide image */ }
@media (min-width: 504px) and (max-width: 1007px) { /* 1000px wide image */ }
@media (min-width: 1008px) { /* 1200px wide image */ }Any number of breakpoints could be supported as long as breakpoints.length == widths.length + 1.
The API is pretty clunky at the moment, but necessarily so.
For specific graphs, the API could be simplified to something like:
For simple media query breakpoints with the same selector, the API could be something like:
This means that the 500px width image would be used for the media queries like so:
Any number of breakpoints could be supported as long as
breakpoints.length == widths.length + 1.