Chopstick Boilerplate

Chopstick Boilerplate is a GitHub-hosted boilerplate for designing bespoke web projects, combining the Chopstick SCSS framework with Jekyll and Gulp to produce static sites, styleguides, and HTML prototypes.

What is Chopstick Boilerplate?

Chopstick Boilerplate is a project starter maintained by the GetChopstick team on GitHub. It gives you a folder structure and a set of tools for building web projects: the Chopstick SCSS framework for styling, Jekyll for templating and static site generation, and Gulp for task automation and a BrowserSync development server. You clone or download the repository, run the install script, and start editing SCSS and content files that compile into a browser-viewable site.

Key Features

• Chopstick SCSS framework — A modular SCSS framework maintained separately and loaded through npm, so partials can be updated and configured without rewriting project code.
• Jekyll integration — Turns Markdown and Liquid templates into a static website, useful for both documentation-style styleguides and multi-page sites.
• Gulp task runner — Automates common tasks; gulp watch starts a BrowserSync server and watches files for changes, with additional gulp commands documented in the wiki.
• Automated installation — sh install.sh checks for Ruby and Node, then downloads required packages; manual installation steps are also documented.
• Component-based SCSS structure — Project-specific code lives in a components layer, keeping the framework partials separate and upgradeable.
• Cross-browser support — Aims to support latest Chrome, Firefox, Safari, and modern mobile browsers on Android, iPhone, and Windows Phone, with Internet Explorer supported from IE10 upward.
• Styleguide capability — Can be used as a living styleguide to display design tokens and UI components alongside the code.

Who is it for?

• Front-end developers prototyping a new website or web app: the structure and Gulp tooling let you start a BrowserSync server and iterate on HTML and SCSS without configuring a build system yourself.
• Designers who want to build a styleguide: the boilerplate's Jekyll-based pages can present colors, typography, and components as a static styleguide.
• Teams starting a static marketing site: Jekyll's templating and the Chopstick SCSS layer give a consistent, repeatable project structure for small and large sites.

What can you do with it?

• Build a static website: Use Jekyll's Liquid templates and Markdown content to create multi-page static sites, styled with SCSS from the components layer.
• Create an HTML prototype: Quickly mock up UI screens with the boilerplate's structure and serve them live with gulp watch on a BrowserSync server.
• Maintain a styleguide: Document components and design tokens in Jekyll pages, with SCSS partials loaded from npm so the styleguide stays in sync with the framework.

How does it work?

After installing Ruby and Node, run sh install.sh from the project root to check package managers and download dependencies. Then gulp watch starts a BrowserSync server that reloads when you edit files; the SCSS is compiled from the Chopstick framework partials plus your project-specific component layer.

FAQ

What are the system requirements?

Chopstick Boilerplate needs Ruby with rubygems, plus Node.js with npm. The automated install script checks for these and downloads the required packages; manual installation instructions are available in the project wiki.

Does it support Internet Explorer?

Yes — the project states that Internet Explorer is supported from IE10 and up, alongside the latest versions of Chrome, Firefox, Safari, and mobile browsers on Android, iPhone, and Windows Phone.

Is Chopstick Boilerplate free to use?

The repository is hosted on GitHub under the GetChopstick organization and contributions via pull requests are encouraged; no licensing or pricing details are stated in the README.

Where can I get help?

Help is available on Twitter at @GetChopstick and in a Slack channel accessible via the project's README link. There are also wiki pages covering installation, gulp commands, and SCSS partials.