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

3. [Optional] Include Style Guide Grid

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

React Components

We've chosen React as our preferred front-end framework. To that end, we maintain the sibling project UI Components, which implements Style Guide as React Components. If you are building a feature in React, prefer this library because the components encapsulate logic, markup, and (in the future) styles.

• Repository
• Storybook
• On NPM

Prototyping

You can quickly test out components in CodePen by forking this template, which contains the latest grid and component CSS from S3.

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

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.