Front end user interface primer toolkit for the pro's
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Updated readme & GitHub templates (#186) Feb 22, 2017
data Updated data examples (#188) Feb 23, 2017
inc Making nav more resilient Mar 13, 2017
pattern Automating the generation of buttons Mar 13, 2017
src Making nav more resilient Mar 13, 2017
.editorconfig Added .editorconfig file (#83) Sep 8, 2016
.gitignore Dont ignore icon and add icon back. #210. Mar 8, 2017
.htaccess Restructure the folders (#95) Sep 19, 2016 Contributing documentation (#98) Sep 21, 2016
gulpfile.js Support some older browsers. May 12, 2017
index.php Close #126 Updating jquery.cookie to js.cookie. Mar 9, 2017
package.json Version Bump. Mar 14, 2017
publish Website Publishing Support (#45) Jul 28, 2016


A front end framework and pattern library

Wiki Documentation

Full documentation can be found here

Getting Started

  1. Clone the project / Download the zip.
git clone
  1. Navigation to the working directory
cd chopchop
  1. Install npm modules
npm i
  1. Update variables, paths, folders, extensions etc at top of the gulpfile.js file to suite your project.
  2. Build assets
npm run build

NPM Scripts

  • $ npm run watch - Builds assets and watches directories for changes.
  • $ npm run build - Builds all assets.
  • $ npm run build:production - Builds all assets for production (Minified CSS and JavaScript, compressed images etc).

Example Project Structure

This can be easily changed to suit your project.

+-- build/
|   +-- css
|   +-- img
|   |   +-- vector
|   +-- js
|   +-- vendor
+-- node_modules/
+-- inc/
+-- pattern/
+-- src/
|   +-- img
|   |   +-- vector
|   +-- js
|   +-- scss
|   +-- vendor
+-- .editorconfig
+-- .gitignore
+-- .htaccess
+-- gulpfile.js
+-- index.php
+-- package.json

Bugs and feature requests

Have a bug or a feature request? Please first read the contributing guidelines document and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.


Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at


This project is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release.