STYLE GUIDE

NGP foundational style guide.

Environment Instructions

For devs

1. Install Homebrew (the missing package manager): ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• Install Git: brew install Git
• Add your SSH Key to Github: https://help.github.com/articles/generating-an-ssh-key/
• Install NVM (Node Version Manager): curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
• Install Node.js (it will respect the .nvmrc file in the repo): nvm install
• Install Gulp globally: npm install --global gulp
• Clone Repo: git clone [email protected]:natgeo/styleguide.git
• Change directory to the repository: cd ~/code/styleguide
• Install packages: npm install
• Run project: gulp serve

For UX

For first time setup & start up:

• After cloning the repo to your machine, go to project directory in terminal
• Run bash setup.sh

For subsequent start ups:

• Run bash startup.sh

If you get one of these errors /Users/{you}/.nvm/nvm.sh: No such file or directory - OR - nvm: command not found, there was an issue writing to your .bash_profile. To remedy this, create a file ~/.bash_profile and add the following ({you} = your computer's username):

export NVM_DIR="/Users/{you}/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

Gulp Tasks

gulp serve

This is the most common task a developer will run. gulp serve will open the documentation site at the root and continue to run a watch task. gulp serve --start [path] or gulp serve -s [path] will open the documentation site at the specified path. For example gulp serve --start icons will open directly to the icons page at http://localhost:3000/icons/.

gulp build

This task will build a development version of documentation site with no watch task.

Test URL's

(coming soon - Lauren is here HUGS)