Styles

General

*.scss should be used in order to create/change css. SCSS can be compiled to css with a npm package as dev dependency or a code editor plugin (e.g. Live Sass Compiler for VSCode).

Index.scss

Do not touch the index.scss or index.css file for simple css changes.

App.scss

For global class based styling (not component based) use App.scss.

Example class from App.scss:

.center {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

This center class can be used in every component/page in order to center elements. This class could also be implemented as a component with its own scss file (e.g. ./src/components/Button). Watch out for naming conventions and css priorities in any other scss files because it might override css classes with the same name (.center).

Normalizer

./src/theme/normalizer.scss

"Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing."

Theme

./src/theme/theme.scss

The Theme.scss file is used to store SCSS variables like colors, fonts, font weights and component sizes.

Index