Install FTW!

Normalize

Use of the Core or Components requires the existence of the Design System normalize stylesheet on the page. Install with:

npm install @pluralsight/ps-design-system-normalize

Include this vanilla CSS in your application in a method appropriate for your project. For usage options, follow the Core Usage docs patterns.

Use Core

Step 1: Install Core

First install the dependency:

npm install @pluralsight/ps-design-system-core

Core design elements are not Components. Rather they are represented as a set of variables.

Step 2: Configure Core

If you write your CSS in JavaScript, no additional configuration is required. Otherwise choose how to integrate the Core variables into your CSS build process. We recommend using PostCSS.

Install any required plugins you don't have yet for PostCSS:

npm install postcss-cssnext postcss-import

Adjust your postcss.config.js to include the required plugins:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': { browsers: ['Last 2 versions', 'IE >= 10'] }
  }
}

Important
See the CSS Build docs for other CSS tech config options if the above doesn't apply.

For usage details, see the Core Usage docs.

Use Components

Most components use glamorous, which has a peerDependency on glamor. It needs to be installed exactly once per application that uses these components:

npm install glamor

Each component is installed separately. The JavaScript is prebuilt Node modules. Assets are inlined. Find and use what you need. For example:

npm install @pluralsight/ps-design-system-button

See individual reference pages for usage examples.

For full, working project examples, see github.