During the class we will go through a lot when it comes to CSS properties and selectors, layouts, variables and ways to use them in the React world (CSS Modules and CSS-in-JS).
Don't forget: If you want to use these sandboxes, don't forget to fork them first.
- Start Sandbox with no styles: https://codesandbox.io/s/upleveled-start-version-with-no-styles-xdrlry
- Sandbox with CSS stylesheet: https://codesandbox.io/s/upleveled-starter-css-hcqpj6
- CSS Modules, SASS and CSS variables: https://codesandbox.io/s/upleveled-css-modules-sass-and-variables-37fzdv
- Emotion Styled Components version: https://codesandbox.io/s/upleveled-css-in-js-sjntkr?file=/src/App.js
- Small example for global styles and theming: https://codesandbox.io/s/upleveled-css-in-js-with-theming-prl93h?file=/src/theme.js
Used during the class:
- Flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/
- Pixels, 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 styled docs: https://emotion.sh/docs/@emotion/styled#gatsby-focus-wrapper
- Emotion Global Styles: https://emotion.sh/docs/globals
- Emotion Theming: https://emotion.sh/docs/theming