Chopstick Boilerplate
Chopstick Boilerplate is a mobile-first responsive Design Boilerplate using the Chopstick framework.
It uses the following tools
- Bower as a dependency manager
- Sass as a scss preprocessor
- Jekyll as a static site generator
- Gulp as a build system
Need help?
- Ask your question on twitter: @GetChopstick
- Join the Slack channel
Setup and usage
Requirements
- Ruby and rubygems
- Node 0.12.2 and npm or NVM
Install
For automated install just run ./install.sh from project root. This will check if package managers are installed and download required packages for you. For manual installation follow the below method.
You only need to do this once in a new project.
First, cd into the project root (where this file is).
Install bundler and the necessary Ruby dependencies:
gem update --system && gem install bundler
bundle install
Install bower and the necessary JavaScript dependencies:
npm install -g bower
bower install
Install gulp and the necessary gulp dependencies:
npm install -g gulp
npm install
Use
We use Gulp as our task runner. There are some basic tasks defined but these can be easily extended by changing the gulpfile.js.
To compile Chopstick Boilerplate, cd into the project root and run:
gulp
This will compile the scss and build the Jekyll site.
For development there is also a watch task wich will load a browsersync server and watch your all your files (*.html, *.md, *.scss, *.js, *.jpg, *.png, *.svg) for changes:
gulp watch
Browsersync also works as a server for your devices. More info can be found on the browsersync site.
We try to keep the code as modular as possible. So you can comment out what you don’t use. Simply put:
Settings + Mixins + Patterns = Chopstick Boilerplate
The boilerplate can be used as a styleguide, to build static websites or to speed up making HTML prototypes.
It uses a settings file + mixins + patterns. You can remove the default theme folder and just use some components from the patterns, as you see fit. We don’t like too much default generated code and neither should you.
For more information and examples please refer to the documentation on our website.
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 IE9 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
What’s in a name
The origin of the Chopstick name:
- Chopstick originated as front-end companion of Fork CMS. Both are developed and maintained by Wijs
- Inspired by the Karate Kid movies, Chopstick is a deadly and precise fly squating tool.
Roadmap
v0.8
- convert chopstick .scss to a dependency (npm and bower) and integrate it into the boilerplate
v0.9
- Add configurable components (API like ui-kit)
- Add configurable theming layer
- Redesign/optimize start theme
v0.10
- Add configurable javascript patterns
v1.0
- Create a self-updating style-guide
- Update website and write complete documentation and starter guide
Credits
Chopstick is maintained by Wijs. 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 CONTRIBUTING.md for more information
We owe a ton of credits to the following projects for inspiration: