Ideas for breakpoints to have scales go with them.

[sorahn]

Hey, I was thinking that a cool idea for the breakpoints context would be to make the shape one level deeper, and allow you to set a custom set of scales per breakpoint.

const breakpoints = {
  sm: {
    query: '(max-width: 479px)',
    scale: [0, 1, 2, 4, 8, 16]
  },
  md: {
    query: '(min-width: 480px) and (max-width: 839)',
    scale: [0, 2, 4, 6, 8, 32]
  },
  lg: {
    query: '(min-width: 840)',
    scale: [0, 4, 8, 16, 32]
  }
}

This could also be worked into the existing system by checking the object values are object, and if so, go looking for the right children, and if they are strings, just treat them as the queries.

Thoughts?

[jxnblk]

Generally, I tend to prefer keeping a consistent scale (related to font size) across breakpoints, but change the step on the scale per breakpoint, but I could see a valid use-case for this approach. Let me think a little bit more about how this could be implemented.

[sorahn]

Sounds Good.

Unrelated to this ticket, I was able to get the new versions using context up and running with no problems :) Thanks much!

[sorahn]

Another thing that could work at this level of customization is columns available per breakpoint.

We're building a 'material' app, so we're trying to stick to their spec.
https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints

This works in the mean time:

// sm: [3, 6, 12]  //=> [4 columns, 2 columns, 1 column]
// md: [(12 / 8), 3, 6, 12] //=> [8 columns, 4 columns, 2 columns, 1 column]

[jxnblk]

I'm not sure I follow what you're suggesting in the last comment, but curious to...

Closing this issue for now though.