
Grid-styled: Responsive React grid system built with styled-components - mxstbr
http://jxnblk.com/grid-styled/
======
Raphmedia
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.

------
whistlerbrk
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
It's not identical. The p values change from 4 to 2.

~~~
mxstbr
Yeah the "Don't" has <Box p={4} />, the "repeat" p={3} and the "yourself"
p={2}!

------
peacetreefrog
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
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.j...](https://github.com/jxnblk/grid-
styled/blob/master/src/Flex.js)

------
tomelders
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).

~~~
pluma
> 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
Both of those confuse me. jQuery's peak popularity as a stand-alone resource
was before SPA's were even a thing.

------
KenanSulayman
... and the page is blank when using it without scripts turned on.

Nevertheless, beautifully designed project.

~~~
ericwood
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.

