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.
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">
[Optional] Query string for specific versions
[Optional] Include Style Guide Grid
<link href="https://uiux.s3.amazonaws.com/style-guide/css/style-guide-grid.css" rel="stylesheet">
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.
You can quickly test out components in CodePen by forking this template, which contains the latest grid and component CSS from S3.
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).
It is suggested to install Node.js via Homebrew to avoid having to run commands as sudo.
Install Homebrew via Terminal
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install Node.js via Homebrew
brew install node
Installing Style Guide
Clone style-guide via GitHub
git clone email@example.com:sendgrid/style-guide.git
Cd into style-guide
Install node packages
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.
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.