Skip to content
Style system and guide for
Branch: master
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.
build readd UglifyJSPlugin Webpack Feb 12, 2019
.stylelintrc Automate deploy process using grunt Oct 23, 2017
.travis.yml Automate deploy process using grunt Oct 23, 2017


Style system and guide for

You can see the Live Style Guide

The goal of the project is to serve as base style for all Binary projects, and to ensure consistency and maintainability of the brand presentation.


  • Add jQuery to your project

  • Add these files to your project:
  • If you need Date and Time Pickers, Tabs or Accordion include "binary.more.js" and "binary.more.css" in your project, this will include a copy of jquery-ui with customized styles.

NPM Usage (Recommended)

  • The library is available on npm
npm install --save binary-style
  • If you need Date and Time Pickers, Tabs or Accordion import "binary-styles/binary.more" in addition to "binary-style"
import 'binary-style';
import 'binary-style/binary.css';
import 'binary-style/binary.more'; // This includes a custom jquery-ui@1.12.1 build
import 'binary-style/binary.more.css'; // This includes custom styles for jquery-ui
  • For new projects it's recommended to import 'binary-style/binary.isolated.css instead,
import 'binary-style/binary.isolated.css';

The only difference is that all css styles are wrapped inside a wrapper with .binary-style selector.

How to work with this project


You need to have:

  • The latest version of node
  • Version 4.x.x of npm (npm install npm@4 -g)
npm install
sudo npm install -g grunt-cli


To build everything and run the test suite

grunt default

optionally, you can run these to only build what you need, note that copy is a must

grunt copy
grunt css
grunt js

Deploy to your gh-pages

grunt deploy

Using sub-folders

There are times that you are working on various branches at the same time, and you want to deploy/test each branch separately on your gh-pages, you can simply use --branch=branchname for grunt commands:

In order to remove the created folders from your gh-pages, you can use either:

  • grunt deploy --cleanup: removes all br_* folders and deploys to the root folder.


  • grunt shell:remove_folder --folder=br_branchname1,br_branchname2,...: only removes the specified folder(s) from your gh-pages.

Preview on your local machine

sudo grunt serve

It will watch for js/css changes and rebuild on every change you make.

Release to Production

grunt release --production=1 [--cleanup]

(The value is needed when more than one option is used)


  • --production (mandatory)
    • In order to prevent accidentally releasing to the wrong target, it is mandatory to provide it.
    • Your remote origin will be checked to be the correct target of the given parameter.
    • Your current branch will be checked to be the correct branch of the given parameter.
  • --cleanup [optional]
    • Creates CNAME file
    • Deploys to gh-pages with the option add: false

Publishing new version

To publish new package version to npm, run

grunt npm_publish
You can’t perform that action at this time.