scss-baseline v1.0.1

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:

1. Clone it to your computer
2. Setup the project

npm install

3. Run storybook locally
4. Check the contribution guidelines in CONTRIBUTING.