Add styled-components, config #121

nik-john · 2019-10-21T18:21:55Z

I have read Chapter's contributing guidelines.
My pull request has a descriptive title (not a vague title like Update README.md).
My pull request targets the master branch of Chapter.

This PR adds Styled Components for styling. This lib is fairly familiar to most folks who have been in the React community for some time. From the offical docs:

Apart from the improved experience for developers, styled-components provides:

Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.

No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.

Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

To add on, theming is going to be important for Chapter. We can use the built-in CSS-in-JS solution for styling but considering that folks would like to white-label their own Chapters, and for DRY and general consistency we need to have a global theme and a Styleguide and I am yet to see something that is as mature as styled-components for this. I don't see any flip sides to this as it is an overwhelmingly popular lib in the community. It's best we decide on this at the outset so we don't have get into refactor hell.

Oh and did I say Styled Components fully supports server-side rendering? ❤️

PS: I have also added a sample global theme file where we can add any global colors/shadows/text styles etc. This file can be potentially overriden if someone wants to white-label their Chapter instance.

I also see us needing some form of UI library that will help with Grid layout - suggestions welcome. styled-bootstrap seems to be a solid option

timmyichen · 2019-10-21T18:36:40Z

.babelrc

        "alias": {
          "client": "./client",
-          "server": "./server"
+          "server": "./server",
+          "styles": "./styles"


will styles/ ever be accessed from server/? if not, can we put it in client/?

I forsee this to be the place where we might (in the future) add some styles that need to be rendered on the server, which is why I left this as it's own folder (I had to do this for Bootstrap on my personal project just this week). Considering that styles are oftentimes implemented on both sides of the boundary, I would recommend we leave it here. Thoughts?

Since next.js is taking care of SSR and our current setup has us grabbing components out of client/ from pages/ where the SSR magic happens, I think it makes sense for styles to also be in client/. I haven't toyed around with any advanced config around SSR though so I'm not sure if we'd need to import anything from styles/ to the server/ directory. Would you happen to know of any instances where it would be needed to do such an import?

@timmyichen Sorry - I've been swamped all day. I'm just seeing this. So the scenario I was talking about is when we need to inline critical above-the-fold CSS like mentioned here. Lighthouse throws warnings when moderate sized CSS files are loaded via link as CSS imports are render-blocking. An instance of this is if we are using a light enough Grid/Flex framework, it might make sense to inline it.

Here are some instances where we do inlining: 1, 2, 3

The way we are hooking up styled-components on this PR is also by inlining the styles although it isn't as straight forward as that.

vaibhavsingh97 · 2019-10-21T18:42:50Z

I also see us needing some form of UI library that will help with Grid layout - suggestions welcome. styled-bootstrap seems to be a solid option

Can we use CSS Grid, and flexbox as a fallback ?

allella · 2019-10-21T20:16:08Z

@abidRahim mentioned using Styled Components in #11 so I'm pinging on this Styled Components topic as it might be a good time to jump in.

ScottBrenner · 2019-10-21T21:30:02Z

Recommend rebasing this PR to run the proposed changes against the CI workflow!

nik-john · 2019-10-22T07:00:14Z

@ScottBrenner Done 👍 CI workflow looks sick 🔥

joelrozen · 2019-10-22T23:58:09Z

I've not used styled-bootstrap, but have implemented styled-system (https://styled-system.com/) into many projects and it is a dream to work with. I can't talk to its pros and cons, but will leave here as a suggestion

nik-john · 2019-10-23T05:12:55Z

@here Could we merge this PR if there aren't any major comments please? I'll rebase ir In an hour

allella · 2019-10-23T12:46:49Z

I'll defer to one of the more tech-stack aware maintainers, like @francocorreasosa, to merge this one.

vaibhavsingh97

LGTM

vaibhavsingh97 · 2019-10-23T17:35:08Z

pages/_app.tsx

+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <ThemeProvider theme={theme}>


are we going to provide dark theme in the future?

If it makes sense with CSS in JS, I'd recommend with this media query prefers-color-scheme:dark {}

Browser coverage is very less for prefers-color-scheme:dark {}

It's something we can look at - one of the advantages of using a global theme is that it's one source of truth for the entire application and whitelabelling and re-theming are a walk in the park

Wow, in that case, I'd favor something with more adoption then; like css vars you could change with a toggle or something. I'm sure ThemeProvider is fine too.

vaibhavsingh97 · 2019-10-23T17:35:54Z

.babelrc

    ]
  ]
-}
+}


Suggested change

}

nik-john · 2019-10-24T05:35:37Z

Merging this in now, will raise another PR for the UI lib

nik-john · 2019-11-16T04:01:23Z

@all-contributors please add @nik-john for doc tool

allcontributors · 2019-11-16T04:01:31Z

@nik-john

I've put up a pull request to add @nik-john! 🎉

timmyichen reviewed Oct 21, 2019

View reviewed changes

vaibhavsingh97 self-requested a review October 21, 2019 18:44

Add styled-components, config

c4d31c0

nik-john force-pushed the nik-john/add-styled-components branch from eee50db to c4d31c0 Compare October 22, 2019 06:56

vaibhavsingh97 approved these changes Oct 23, 2019

View reviewed changes

allella mentioned this pull request Oct 23, 2019

MVP Wireframes/Mock-ups #114

Closed

18 tasks

Merge from master

9560c21

nik-john merged commit 1296360 into freeCodeCamp:master Oct 24, 2019

This was referenced Oct 28, 2019

Our Roadmap #47

Closed

Frontend libs #34

Closed

allcontributors bot mentioned this pull request Nov 16, 2019

docs: add nik-john as a contributor #185

Closed

freeCodeCamp deleted a comment from allcontributors bot Nov 16, 2019

allcontributors bot mentioned this pull request Nov 16, 2019

docs: add nik-john as a contributor #211

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add styled-components, config #121

Add styled-components, config #121

nik-john commented Oct 21, 2019 •

edited

Loading

timmyichen Oct 21, 2019

nik-john Oct 21, 2019

timmyichen Oct 21, 2019

nik-john Oct 22, 2019 •

edited

Loading

vaibhavsingh97 commented Oct 21, 2019

allella commented Oct 21, 2019

ScottBrenner commented Oct 21, 2019

nik-john commented Oct 22, 2019

joelrozen commented Oct 22, 2019

nik-john commented Oct 23, 2019

allella commented Oct 23, 2019

vaibhavsingh97 left a comment

vaibhavsingh97 Oct 23, 2019

chaotic-stump Oct 23, 2019 •

edited

Loading

vaibhavsingh97 Oct 23, 2019

nik-john Oct 23, 2019

chaotic-stump Oct 23, 2019

vaibhavsingh97 Oct 23, 2019

nik-john commented Oct 24, 2019

nik-john commented Nov 16, 2019

allcontributors bot commented Nov 16, 2019

Add styled-components, config #121

Add styled-components, config #121

Conversation

nik-john commented Oct 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nik-john Oct 22, 2019 • edited Loading

Choose a reason for hiding this comment

vaibhavsingh97 commented Oct 21, 2019

allella commented Oct 21, 2019

ScottBrenner commented Oct 21, 2019

nik-john commented Oct 22, 2019

joelrozen commented Oct 22, 2019

nik-john commented Oct 23, 2019

allella commented Oct 23, 2019

vaibhavsingh97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaotic-stump Oct 23, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nik-john commented Oct 24, 2019

nik-john commented Nov 16, 2019

allcontributors bot commented Nov 16, 2019

nik-john commented Oct 21, 2019 •

edited

Loading

nik-john Oct 22, 2019 •

edited

Loading

chaotic-stump Oct 23, 2019 •

edited

Loading