search

markerikson / react-community-tools-practices-cheatsheet

Descriptions and use cases for common tools and practices in the React community
https://react-community-tools-practices-cheatsheet.netlify.app/
328 stars 13 forks source link

Add Styling Overview and Plain CSS docs #12

Closed srmagura closed 2 years ago

srmagura commented 2 years ago

Let me know of any factual inaccuracies or overly-opinionated statements 😀

Note: I fixed a dash in the Redux doc and Prettier made some other changes.

netlify[bot] commented 2 years ago

Deploy Preview for react-community-tools-practices-cheatsheet ready!

Name Link
Latest commit 97e22bbf10ccc2025243e84d1807823d1747a6d5
Latest deploy log https://app.netlify.com/sites/react-community-tools-practices-cheatsheet/deploys/62814e5b6c39100009f038a9
Deploy Preview https://deploy-preview-12--react-community-tools-practices-cheatsheet.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

markerikson commented 2 years ago

FYI I haven't forgotten about all this, just juggling too many other things right now. Will try to come back to this after I'm done with confs and talks in another week+.

markerikson commented 2 years ago

Skimmed the CSS page. Looks great so far! I think it would be useful to see a small example snippet that shows what it looks like to use each approach, like a small classname + <div className="whatever"> for plain CSS, etc.

srmagura commented 2 years ago

Good idea, would you want that on the overview page or on the dedicated page for each technology?

markerikson commented 2 years ago

I'd say on each page.

srmagura commented 2 years ago

When I looked back at this, I saw I already had a small snippet of CSS so I added a more complete & realistic example at the bottom. Hopefully the new example is not too long. If you like it, I'll use this same example component to demonstrate each of the different styling methodologies.

I can get started on the next 2-3 styling pages once this gets merged 🙂

markerikson commented 2 years ago

Looks nice! Could maybe remove the "placeholder" pages from this PR, but eh, let's just get this in :)

(Also, we're gonna have to start improving the header bar and front page at some point...)

srmagura commented 2 years ago

Thanks! I think I had to put those placeholders in there to prevent Docusaurus from complaining about broken links...