CSS properties and selectors, layouts, variables and ways to use them in React (CSS Modules + SCSS and CSS-in-JS)
- No styles: https://codesandbox.io/p/sandbox/upleveled-start-version-with-no-styles-ckwx4z
- Global CSS: https://codesandbox.io/p/sandbox/upleveled-starter-global-css-nvf9c8?file=%2Fsrc%2FApp.js
- CSS Modules, SASS, CSS variables: https://codesandbox.io/p/sandbox/upleveled-css-modules-scss-css-variables-q6mq83?file=%2Fsrc%2FApp.js
- Emotion: https://codesandbox.io/p/sandbox/upleveled-css-in-js-xkn9mv?file=%2Fsrc%2FApp.js
- Tailwind CSS: https://codesandbox.io/p/devbox/hrzvlj
- Bonus: Global styles and theming: https://codesandbox.io/s/upleveled-css-in-js-with-theming-prl93h?file=/src/theme.js
Used during the lecture:
- Flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/
- px, em, rem: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/
- Search for browser default values: https://browserdefaultstyles.com/
- CSS selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
- HTML elements display inline vs block: https://dev.to/akshayjaagirdhar/differences-between-html-inline-and-blocks-elements-43d7
- SASS Ampersand: https://css-tricks.com/the-sass-ampersand/
Technologies used:
- CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- Sass: https://sass-lang.com/
- Emotion React docs: https://emotion.sh/docs/@emotion/react
- Emotion Global Styles: https://emotion.sh/docs/globals
- Emotion Theming: https://emotion.sh/docs/theming
- Tailwind CSS: https://tailwindcss.com/
Further Reading:
- What's New in CSS? (with "Scoped CSS") https://developer.chrome.com/blog/whats-new-css-ui-2023