Chopstick design framework
Switch branches/tags
Nothing to show
Clone or download
Latest commit ba8af42 Nov 22, 2016
Failed to load latest commit information.
scss grid: remove default value for flex-direction Nov 15, 2016
.editorconfig initial commit May 24, 2016
.gitignore remove bower Oct 15, 2016 update contributing Oct 15, 2016 revert license Jun 23, 2016 remove bower from readme Oct 19, 2016
package.json 1.0.1 Oct 19, 2016

Chopstick Design Framework

Chopstick is a mobile-first responsive design framework.

It uses the following tools

  • Sass as a scss preprocessor

Need help?

Setup and usage


Use your prefered workflow to compile the .scss.


.scss structure.

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


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 you have 3 options:

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

Browser support

Chopstick aims to support all modern browsers. This includes latest versions of Chrome, Firefox and Safari and the latest mobile browsers on Android, iPhone and Windows Phone. Internet explorer is currently supported starting from IE10 and up.

What is the Chopstick framework

Chopstick is a framework based on the ITCSS architecture and a series of principles. It creates a structure to easily set-up and build bespoke web projects.

Why do we make Chopstick framework

  • Maintain sensible defaults
  • Enforce a global coding style
  • Create a scalable system for both small and big web projects

Chopstick principles

Chopstick is built upon the following principles. Please keep these in mind when contributing and/or using this framework.

Low specificity

A single-depth-class-based architecture based on the BEM naming methodology.

Highly decoupled

Avoid reliance on other bits.

  • Separation of Concerns: let each piece of code solve its own problems
  • Single Responsibility Principle: one thing, one thing only, one thing well
  • Open/Closed Principle: add via extension, not modification

Highly composable

  • We build the bits that build the bits
  • Make everything opt-in and configurable: expose API-like CSS

Keep it simple

  • The Principle of Least Surprise: make sure expectations are met, and nothing else
  • Murphy’s Law: Pick the option that is the most resilient, even if it is the most boring one


You are free to contribute to Chopstick via GitHub Pull Requests. We have a couple of simple guidelines we try to follow, of which most are taken from the CSS Tricks Sass Style Guide. Please refer to the for more information

We owe a ton of credits to the following projects for inspiration: