1.7.0 • Published 3 years ago
cra-template-sanacompany v1.7.0
CRA Template Sanacompany
Template for generate ReactJS applications.
- ESLint
- Prettier
- PropTypes
- SCSS
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-template-sanacompany
General notes | Conventions
- 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.
Files & Folder structure
assets: fonts, icons, images.components: All react components. As react indicates in its documentation we should avoid creating many subfolders.stylesheets: Contains all stylesbase: Styling base components like layout, an input, a select. Inside this folder there are some important files._variables.scss: Contains all variables relevant to the application._typography.scss: Styles for everything related with text. (Sizes, fonts and so on)._layout.scss: Contains all the styles related to base inputs. (<input>,<body>, etc)._margins.scss: It contains helpers for margins._helpers.scss: Helpers file.
components: All react components and pages styles.mixins: Every Sass mixin should be placed here.application.scss: Starting point for all files.