└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Layout and Composition with CSS in React
 2 | 
 3 | In these 3 hours we will go through a lot when it comes to CSS layouts, variables and ways to use them in the React world.
 4 | 
 5 | **Remember that whatever way you decide to continue using is merely a choice, none are better than the previous.**
 6 | 
 7 | ## Sandboxes
 8 | 
 9 |  - Starter Sandbox: https://codesandbox.io/s/no-design-21zy2
10 |  - CSS Version: https://codesandbox.io/s/css-design-g6t0v
11 |  - CSS Variables: https://codesandbox.io/s/css-design-variables-ri1nl
12 |  - CSS Modules Version: https://codesandbox.io/s/css-modules-design-qroru
13 |  - SCSS Version: https://codesandbox.io/s/scss-variables-xfrvk
14 |  - Emotion Version: https://codesandbox.io/s/emotion-styled-jrw8n
15 |  - Emotion Theme Version: https://codesandbox.io/s/emotion-styled-themes-i37f5
16 |  - Tailwind: https://codesandbox.io/s/tailwind-7bzr2?file=/src/App.js
17 | 
18 | ## Resources
19 | 
20 | - Frontend Mentor: https://www.frontendmentor.io/challenges?types=free
21 | - Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
22 | - CSS Grid Game: https://cssgridgarden.com/
23 | - Flexbox Game: https://flexboxfroggy.com/
24 | - CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
25 | - Sass: https://sass-lang.com/
26 |  - Emotion styled docs: https://emotion.sh/docs/@emotion/styled#gatsby-focus-wrapper
27 |  - Emotion Global Styles: https://emotion.sh/docs/globals
28 |  - Emotion Theming: https://emotion.sh/docs/theming
29 |  - Styled Components: https://styled-components.com/
30 |  - Tailwind: https://tailwindcss.com/
31 |  - Tailwind VS Code plugin: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
32 | 
33 | Thank you
34 | 
35 | Sara Vieira
36 | @NikkitaFTW
37 | 


--------------------------------------------------------------------------------