Update / Improve documentation narrative & content about styled-components-website

[oliverturner]

I guess the person I'd love to hear from most as far as motivation is concerned is @geelen :)

[mxstbr]

We definitely need a big section about why you would do any of this!

[kitten]

@mxstbr Maybe we can rewrite your talk here into a short raison d'être? The transcript is already there :P https://pusher.com/sessions/meetup/reactivate-london/from-css-preprocessors-to-styled-components

[oliverturner]

A first pass:

Styled Components takes the big idea of CSS Modules - automated isolation - and extends it, making React the glue layer between mark-up and presentation. Extracting structural nodes from "smart" views leads to cleaner architecture as a natural by-product.

You get to write modern, expressive, idiomatic CSS because, uniquely among CSS-in-JS solutions, Styled Components recognises the power of the language instead of trying to reinvent it.

[kitten]

@mxstbr @oliverturner I wrote an initial "Motivation" section, based on the talk at Reactivate. Maybe you guys want to iterate on this? https://github.com/styled-components/styled-components-website/blob/master/components/basics/motivation.js

[geelen]

Yeah I should definitely write up a few things, but there's not much chance I'll get to that in the next two weeks, sorry.

As for the homepage, I don't mind the split view with live coding possibilities, but visually it's a bit heavy at the moment. I'd leave the original code snippet photo there for the moment, or pick a demo that's a bit less prominent (maybe a couple of buttons, no white background, etc.)

Love that fkn gradient though! Makes me want a mimosa so bad.

[kitten]

@geelen I think you're right about the homepage liveedit example. What if we use the current styled-component website's code in a simple CodeBlock?

[geelen]

Yeah that works well

[mxstbr]

I feel like the code block should be tighter there, in the sense that there's a lot of wasted black space?

[kitten]

@mxstbr True that, I'll change the width of the container on the homepage

[kitten]

Let's close this for now in favour of more potential issues in the future :)