CRA Template Sanacompany

Template for generate ReactJS applications.

How to use this template ?

Execute the following command when you create your React App with CRA:

npx create-react-app my-app --template sanacompany

To use this template locally, execute the following command:

npx create-react-app my-app --template file:/path/to/folder/cra-sanacompany

First, we use YARN, try to avoid npm for dependencies management.
Every SCSS class is written following the BEM methodology.
Every SCSS class is Mobile first. What does this mean? The base SCSS code is for mobile. Every media query should be written for larger screens (screen-sm, screen-md, screen-lg, screen-xl).
We use SCSS lint, you should install this gem in your computer: gem install scss_lint. Gem website.

assets: fonts, icons, images.
components: All react components. As react indicates in its documentation we should avoid creating many subfolders.
stylesheets: Contains all styles
1. base: Styling base components like layout, an input, a select. Inside this folder there are some important files.
  1. _variables.scss: Contains all variables relevant to the application.
  2. _typography.scss: Styles for everything related with text. (Sizes, fonts and so on).
  3. _layout.scss: Contains all the styles related to base inputs. (<input>, <body>, etc).
  4. _margins.scss: It contains helpers for margins.
  5. _helpers.scss: Helpers file.
2. components: All react components and pages styles.
3. mixins: Every Sass mixin should be placed here.
4. application.scss: Starting point for all files.