@turquoisehealth/pit-viper
v2.160.1
Published
Turquoise Health's design system.
Readme
Pit Viper
Documentation for Turquoise Health's design system, Pit Viper.
Pit Viper has 2 main components:
- The Pit Viper CSS framework
- The Pit Viper Component Library (PV Components)
Running Pit Viper Locally
- Clone this repo.
- Run
npm installto install all necessary packages. - Run
npm run startand you should see Pit Viper in http://localhost:8080/. Any updates will automatically update and refresh in the browser. - If you are using the Pit Viper component library, run
npm run build:pv-componentsto build the component lib documentation and serve a static version of it via 11ty.
To develop locally (CSS or components), read the Notion documentation.
For information on versioning/publishing components, refer to the README here
Applying Pit Viper (CSS)
Install as an npm package
npm install @turquoisehealth/pit-viperThe package includes the following files:
_site/assets/css/pit-viper.css_src/assets/sprite.svg
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>Use as a CodePen template
You can use the 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.
Support
- #design-system channel in Slack
- Office Hours, every Wednesday from 11am-Noon Pacific (contact Mike Aparicio for an invite)
- Submit an issue in this Github repo
