scss-baseline
v1.0.1
Published
This project provides a very simple baseline for your SCSS. It has a specific structure to keep consistency amongst all projects.
Readme
Celfocus SCSS baseline
This project provides a very simple baseline for your SCSS.
It has a specific structure to keep consistency amongst all projects.
It provides the basic styling such as:
- Generic variables to be used on your components (fonts, colors, spacings, etc.)
- Grid system
- Flex functional classes
- Mixin to generate spacing classes
- RTL
The SCSS is devided in:
- base: initial styling setup (normalize, reset, etc)
- generic: generic styling (animation, grid, etc.)
- settings: variables and configurations (colors, fonts, etc)
- tools: mixins, functions, placeholders or any kind of logic that creates or helps to create classes.
- trumps: functional classes that should override component's styling
Usage
Setting up your project
If you are using a react component library
- Create a project from the create-react-lib
- Choose to import scss-library
If you are NOT using a react component library
- Dowload the project
- Keep the structure and proceed with the necessary changes according to the project
Lint and code formater
TODO: Validate if we should go foward with stylelint
https://www.npmjs.com/package/stylelint
Contribution
If you want to contribute to this repo, do the following:
- Clone it to your computer
- Setup the project
npm install- Run storybook locally
- Check the contribution guidelines in CONTRIBUTING.