# Introduction

The SendGrid Style Guide is a library for developing consistent UI/UX at SendGrid. It is made up of modular, reusable components based on OOCSS and SMACSS principles.

# Usage

SendGrid's Style Guide can be easily included in applications or one-off projects. We recommend pulling the latest version of Style Guide's CSS from our CDN. You may also clone this repository and pull in the component SCSS files if you wish to only include a portion of Style Guide in your project.

## CDN

1. ### Include Style Guide in the head of your HTML document

   <link href="https://uiux.s3.amazonaws.com/style-guide/css/style-guide.css" rel="stylesheet">

2. ### [Optional] Query string for specific versions

   style-guide.css?versionId=VERSION_NUMBER

# Contributing

The Style Guide library is built using Gulp and will require you to have Node.js installed on your machine. You can check if you have Node.js installed by running node -v in a terminal window (the command will return a version number if it is installed).

## Local Setup

It is suggested to install Node.js via Homebrew to avoid having to run commands as sudo.

1. ### Install Homebrew via Terminal

   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. ### Install Node.js via Homebrew

   brew install node

## Installing Style Guide

1. ### Clone style-guide via GitHub

   git clone git@github.com:sendgrid/style-guide.git

2. ### Cd into style-guide

   cd style-guide

3. ### Install node packages

   npm install

4. ### Install scss-lint

   gem install scss_lint

## Local Development

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 npm start task combines many of the useful tasks to speed up development. It will compile all .scss and .njk 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.

## Deploying

We also include a variety of gulp taks to help with deploying Style Guide. Running npm run build 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.