menu
Channels
# All channels
view-forward
# General
view-forward
# Help me
view-forward
# Requests
view-forward
Team

Evergreen + Rebassjs/grid For Responsive Layouts

October 25, 2018 at 8:18am

Evergreen + Rebassjs/grid For Responsive Layouts

October 25, 2018 at 8:18am (Edited 1 year ago)
Hello!
So according to the Evergreen docs, there is no support for responsive layouts or media queries. Do you see any problems with wrapping Evergreen's <Pane /> component with Rebass's <Box /> component (https://github.com/rebassjs/grid#responsive-styles) ?
It would look something like this:
import { Box, Text } from 'rebass';
import { Pane, Text as EText } from 'evergreen-ui';
const HelloWorld = () =>
<Box>
<Pane
background="tint2"
display="flex"
flexWrap="wrap"
>
<Text as={EText}
fontSize={[1,2,3]}
textAlign="center"
paddingTop="2rem"
>
Hello world!
</Text>
</Pane>
</Box>
Thanks for any input or advice!
Cheers

October 31, 2018 at 12:23am
I don't think that will work as expected.
  • reply
  • like
You could create a MediaQuery component of sorts to render different blocks on different screen sizes.
  • reply
  • like

October 31, 2018 at 1:49pm
Hmm, well so far its working in this little example: https://codesandbox.io/s/xozn2x40kp
  • reply
  • like
You can see that Rebass's <Box /> is resizing <Pane /> according to window size. I haven't dug too deep into this, so I suppose there might be some issues further down the road, but I am not sure what they might be.
  • reply
  • like
Feel free to play around and see if it works for you use case!
  • reply
  • like

November 26, 2019 at 6:19pm
Although this is from last year, it would be extremely helpful to try to have some type of media query support like what Rebass does. This would prevent the need to create or use some type of media query library (like react-socks)
  • reply
  • like