Pit Viper

Using Pit Viper

Install as an npm package

npm install th-pit-viper

The package includes the following files:

_site/assets/css/pit-viper.css (97k)
_site/assets/js/pit-viper.js (2k)
_src/assets/sprite.svg (49k)

Add pit-viper.css in the <head> of a page:

<link rel="stylesheet" href="[path]/pit-viper.css">

Add the contents of sprite.svg in the <body> of a page:

<div hidden>[include sprite.svg here]</div>

If components with JS are used, include pit-viper.js at the bottom of the <body> of a page:

<script src="[path]/pit-viper.js"></script>

Use as a CodePen template

You can use a template below to start a new pen that pulls in the latest version of pit-viper.css so you can start prototyping quickly without writing CSS.

CodePen Blank Template CodePen Page Template

Pit Viper Helpers

Leo put together some useful patterns for use in the Enterprise platform using Pit Viper. You can find them in the README.

Support

Visit the #design-system channel in Slack
Submit a ticket on JIRA

Why “Pit Viper”?

Whether it’s the snake (which can sometimes be turquoise colored) or the iconic fashion accessory, Pit Vipers are cool!