5 ms·

Grid-styled: Responsive React grid system built with styled-components

79 points by mxstbr 9y ago

KenanSulayman 9y ago
... and the page is blank when using it without scripts turned on. Nevertheless, beautifully designed project.
- ericwood 9y ago
  I'd say that's very acceptable given it's a promotion page for a JS library that shows live examples of the library in use.
peacetreefrog 9y ago
cool, sorry if this is dumb/obvious, but how does this fit with reflexbox (another react grid system by the same author)? do they complement each other? or is this a better version of reflexbox? or do you use one or the other depending on your goals? thanks,
- snarkyturtle 9y ago
  Seems like this is a reimplementation of Reflexbox (Brent Jackson did both of them). The source uses styled-components vs the previous css-in-js implentation (I think it used cxs). https://github.com/jxnblk/grid-styled/blob/master/src/Flex.js https://github.com/jxnblk/grid-styled/blob/master/src/Flex.j...
tomelders 9y ago
I'm not sure that grids have a role to play in single page web apps. But I'm convinced that React only has a role to play in SPA's (or self contained widgets).
- badkungfu 9y ago
  > I'm convinced that React only has a role to play in SPA's (or self contained widgets) Convinced by what? Many do use it outside of SPAs.
  - tomelders 9y ago
    I'm convinced by the fact that React makes the complex simple, and the simple complex. I make web apps most of the time, and I love React. React + Redux is my goto architecture and I don't think there's anything out there to rival it. But I don't see any sense in using it to create a blog, or a promotional website, or any other kind of website that is essentially a web version of something that could also live in print. You're right, many people do use it outside of SPA's, but I think it's a case of; If all you've got is a hammer, everything looks like a nail.
- pluma 9y ago
  > But I'm convinced that React only has a role to play in SPA's Why? You can even use it for static site generation or purely server-rendered websites. You're probably thinking of jQuery.
  - dcd0101 9y ago
    Both of those confuse me. jQuery's peak popularity as a stand-alone resource was before SPA's were even a thing.
whistlerbrk 9y ago
Not sure about anyone else but the "Dont", "Repeat", "Yourself" page is not rendering correctly, the bar is a significant distance removed from Don't compared to Repeat and Yourself. Not sure why, code is identical, but I didn't inspect...
- edabot 9y ago
  It's not identical. The p values change from 4 to 2.
  - mxstbr 9y ago
    Yeah the "Don't" has <Box p={4} />, the "repeat" p={3} and the "yourself" p={2}!
Raphmedia 9y ago
They might want to make their navigation more oblivious. I totally missed the fact that this page was a slideshow and that there were little green arrows at the bottom right corner.

79 points by mxstbr 9y ago

KenanSulayman 9y ago

... and the page is blank when using it without scripts turned on. Nevertheless, beautifully designed project.

ericwood 9y ago
I'd say that's very acceptable given it's a promotion page for a JS library that shows live examples of the library in use.

peacetreefrog 9y ago

cool, sorry if this is dumb/obvious, but how does this fit with reflexbox (another react grid system by the same author)? do they complement each other? or is this a better version of reflexbox? or do you use one or the other depending on your goals? thanks,

snarkyturtle 9y ago
Seems like this is a reimplementation of Reflexbox (Brent Jackson did both of them). The source uses styled-components vs the previous css-in-js implentation (I think it used cxs). https://github.com/jxnblk/grid-styled/blob/master/src/Flex.js https://github.com/jxnblk/grid-styled/blob/master/src/Flex.j...

tomelders 9y ago

I'm not sure that grids have a role to play in single page web apps. But I'm convinced that React only has a role to play in SPA's (or self contained widgets).

badkungfu 9y ago
> I'm convinced that React only has a role to play in SPA's (or self contained widgets) Convinced by what? Many do use it outside of SPAs.
- tomelders 9y ago
  I'm convinced by the fact that React makes the complex simple, and the simple complex. I make web apps most of the time, and I love React. React + Redux is my goto architecture and I don't think there's anything out there to rival it. But I don't see any sense in using it to create a blog, or a promotional website, or any other kind of website that is essentially a web version of something that could also live in print. You're right, many people do use it outside of SPA's, but I think it's a case of; If all you've got is a hammer, everything looks like a nail.
pluma 9y ago
> But I'm convinced that React only has a role to play in SPA's Why? You can even use it for static site generation or purely server-rendered websites. You're probably thinking of jQuery.
- dcd0101 9y ago
  Both of those confuse me. jQuery's peak popularity as a stand-alone resource was before SPA's were even a thing.

whistlerbrk 9y ago

Not sure about anyone else but the "Dont", "Repeat", "Yourself" page is not rendering correctly, the bar is a significant distance removed from Don't compared to Repeat and Yourself. Not sure why, code is identical, but I didn't inspect...

edabot 9y ago
It's not identical. The p values change from 4 to 2.
- mxstbr 9y ago
  Yeah the "Don't" has <Box p={4} />, the "repeat" p={3} and the "yourself" p={2}!

Raphmedia 9y ago

They might want to make their navigation more oblivious. I totally missed the fact that this page was a slideshow and that there were little green arrows at the bottom right corner.