Developing for the Design Guide

Please read our Contributing Guidelines for a full understanding of the process of contributing to the Watson Design Guide. Links will often have full installation instructions, please be sure to click in to them and follow the instructions posted within

Pre Setup

Before we get started, the following items need to be installed on our computers:

Git - Check to see if it's installed by running git --help in your terminal

If you are on an Apple Computer:

1. Homebrew - Check to see if it's installed by running brew -h in your terminal
2. NVM - Install by running brew install nvm in your terminal.
3. Run touch ~/.bash_profile, then open ~/.bash_profile. This will create and open a file that allows your terminal to be set up. If you know you are running a different terminal, open that terminal's profile file (for instance, ZSH's file is ~/.zshrc).
4. Add the following to your ~/.bash_profile file: export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh, each on separate lines. Save the file, close your terminal, and restart it.
5. Node.js - Install by running nvm install v0.12 in your terminal.
6. Add nvm use v0.12 on a new line to the same file you edited in Step 3. Save, close, and re-open your terminal
7. Bower - Check to see if it's installed by running bower -h

If you are on a Windows Computer

1. NVM for Windows
2. Node.js - Install by running nvm install v0.12 in your terminal.
3. Run nvm use v0.12 to start Node when you want to use it
4. Bower - Check to see if it's installed by running bower -h

If you are on a Linux Computer

1. NVM - Check to see if it's installed by running nvm -h
2. Run touch ~/.bash_profile, then open ~/.bash_profile. This will create and open a file that allows your terminal to be set up. If you know you are running a different terminal, open that terminal's profile file (for instance, ZSH's file is ~/.zshrc).
3. Add the following to your ~/.bash_profile file: export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh, each on separate lines. Save the file, close your terminal, and restart it.
4. Node.js - Install by running nvm install v0.12 in your terminal.
5. Add nvm use v0.12 on a new line to the same file you edited in Step 2. Save, close, and re-open your terminal
6. Bower - Check to see if it's installed by running bower -h

Setup

All work should be done on your own version of the Design Guide and requests should be made back in to contribute.

1. Fork and clone this repository
2. Open the repository's folder in your terminal
3. Add this repository as a remote git remote add upstream https://github.com/IBM-Watson/design-library.git
4. Run git remote -v. You should have 2 remotes, origin which is your fork, and upstream which is this repository

Working with the Design Guide

Work is done on the Design Guide locally using a Node development environment. To get the environment working, run the following command from your terminal inside your repository's folder:

npm install - Install Node and Bower dependencies

To update your environment, run the following commands from your terminal inside your repository's folder. This should be run whenever a new branch is created or you know dependencies have been updated:

1. npm update - Update Node dependencies
2. npm run install:bower - Install/Update Bower dependencies

To run the development environment, run the following command from your terminal inside your repository's folder. Let it run in the background:

gulp - Run the development environment

Creating a New Branch

Whenever you want to create a new branch, run the following commands from your terminal inside your repository's folder:

1. git checkout develop - Move in to your Develop folder
2. git fetch --all - Get all updates from all remotes
3. git pull upstream develop - Bring in the changes from this repository's develop branch
4. git push origin develop - Put the changes on to your fork's develop branch
5. git checkout -b {{branch}} Create a new branch where {{branch}} is replaced with a branch name following our Branching Model
6. git push -u origin {{branch}} Put the new branch on to your fork where `{{branch}} is replaced with the same branch name as before

Once finished, run through the Working with the Design Guide commands