the-grid / rig

Responsive Image Generator
MIT License
6 stars 1 forks source link

Convenience methods #1

Open paulyoung opened 10 years ago

paulyoung commented 10 years ago

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.

jonnor commented 10 years ago

I got code for this

paulyoung commented 9 years ago

Convenience for breakpoints was added in 9571e0fe16f0936894a0dbfe93e5ee36030ee962.