Rebass: How to configure the breakpoints?

[borisyordanov]

I did read the documentation on the subject, but it only specifies the breakpoints should be defined under the breakpoint key of the theme. What do i use for the value though?

const theme = {
    breakpoints: ???
};

[corygibbons]

Array of values:

const theme = {
  breakpoints: [ '40em', '52em', '64em' ]
};

[borisyordanov]

@corygibbons Thanks for clearing that up. Are there any default breakpoints set up in rebass? I noticed that my boxes do stack, but i assumed that's due to my setting flexWrap="wrap" on their Flex parent

[corygibbons]

@borisyordanov no problem, if there is I believe they use the defaults from styled-system: https://github.com/jxnblk/styled-system/blob/master/src/index.js#L18

[borisyordanov]

I think i got the picture, i'll try and set up a PR for a documentation update

[borisyordanov]

@corygibbons Can you point me in the right direction as to where the theme docs are located. I managed to find this file in the repo, which seemed relevant at first, but then i realised it doesn't match the text on the website. How can i edit the text used in the docs on the website?

As you can see it lists some default values for the breakpoints, but they're wrong. I managed to verify that the defaults are indeed inherited (or at least the same) as the ones in styled system.

[jxnblk]

@borisyordanov the website content is in this repo: https://github.com/rebassjs/rebassjs.org – I'm planning on updating the build setup, but the .md files will still be the source for the content

[Jaikant]

Looking for the default values, the links to styled-system given above are broken :(