<article class="container style-guide-component" id="contributing">
  <h1>Contributing</h1>
  <p>The Style Guide library is built using <a href="http://gulpjs.com/" target="_blank">Gulp</a> and will require you to have <a href="https://nodejs.org/en/" target="_blank">Node.js</a> installed on your machine.</a> You can check if you have Node.js installed by running <span class="code">node -v</span> in a terminal window (the command will return a version number if it is installed).</p>
  <h2>Local Setup</h2>
  <p>It is suggested to install Node.js via <a href="http://brew.sh/" target="_blank">Homebrew</a> to avoid having to run commands as <span class="code">sudo</span>.</p>
  <ol class="numbered-steps">
    <li>
      <h3>Install Homebrew via Terminal</h3>
      <p><span class="code">/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</span></p>
    </li>
    <li>
      <h3>Install Node.js via Homebrew</h3>
      <p><span class="code">brew install node</span></p>
    </li>
  </ol>
  <h2>Installing Style Guide</h2>
  <ol class="numbered-steps">
    <li>
      <h3>Clone style-guide via GitHub</h3>
      <p><span class="code">git clone git@github.com:sendgrid/style-guide.git</span></p>
    </li>
    <li>
      <h3><abbr title="Change directory">Cd</abbr> into style-guide</h3>
      <p><span class="code">cd style-guide</span></p>
    </li>
    <li>
      <h3>Install node packages</h3>
      <p><span class="code">npm install</span></p>
    </li>
    <li>
      <h3>Install scss-lint</h3>
      <p><span class="code">gem install scss_lint</span></p>
    </li>
  </ol>
  <h2>Local Development</h2>
  <p>There are a variety of gulp tasks that have been defined to help with local development of Style Guide components and the demonstration site. The <span class="code">npm start</span> task combines many of the useful tasks to speed up development. It will compile all <abbr title="sass">.scss</abbr> and <abbr title="nunjucks">.njk</abbr> files, start browser-sync to referesh your browser window as changes are made, and continue watching for changes. Errors in your stylesheets or template files can cause this task to stop.</p>
  <h2>Deploying</h2>
  <p>We also include a variety of gulp taks to help with deploying Style Guide. Running <span class="code">npm run build</span> will clean our dist folder, compress and concatenate all .css and .js files, optimize images, and copy over any fonts. We use the contents of the dist folder to deploy the demonstation site of Style Guide to the branch, gh-pages.</p>
</article>
