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 (159k)
_site/assets/css/pit-viper-v2.css (159k)
_site/assets/js/pit-viper.js (7k)
_src/assets/sprite.svg (59k)
_src/assets/sprite-v2.svg (68k)

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>

If components with AG Grid are used (such as pv-data-grid, include g-grid-enterprise.min.js at the bottom of the <body> of a page:

<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.js"></script>

Note: an enterprise license key is required for AG Grid components. Contact a design system engineer if you need help accessing the key.

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

Django applications (such as the TQ Enterprise platform) use an asset packaging library called django-pipeline. This allows external stylesheets and JS to be stored elsewhere and fetched using the Django templating system.

Before importing any of the assets above, check to see if any of your extended templates already import the required assets - if they do, you do not need to re-import them.

Once the pipeline is configured correctly, you can import files like this.


{% stylesheet 'pit-viper' %}
{% javascript 'pit-viper-components' %}
{% stylesheet 'ag-grid' %}
{% javascript 'ag-grid' %}

Note: the names above are examples and may be different depending on the application setup.

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!