Sass framework

Chopstick Boilerplate uses chopstick-sass as the Sass framework. This is loaded as a dependency with NPM. When you run gulp or gulp watch the files are copied into the vendor folder.

ITCSS

We use the following layers according to the ITCSS structure.

1. Settings: contains global variables and config switches to get you started. These can be overwritten in your project. Simply duplicate the variables you want to change or replace this file.
2. Tools: contains mixins and functions.
3. Generic: contains ground-zero styles (Normalize.css, resets, box-sizing)
4. Elements: contains unclassed HTML elements (type selectors)
5. Objects: contains cosmetic-free design patterns
6. Components: contains designed components, chunks of UI (these are maintained in the boilerplate as they are specific to this)
7. Plugins: contains third-party plugin styles
8. Utilities: contains helper classes
9. Shame: nasty, hacky, quick-fix CSS

Changing something in the Sass framework

We try to keep the code as modular as possible so you can comment out what you don’t use.

If you want to change something within the Sass framework you have 3 options:

1. Change the settings and default appearance by overriding the variables in the settings file of your project.
2. Create a pull request on the source code in the chopstick-sass repository.
3. Copy the original file into your own project. This means you will have to do manual updates in the future.