Skip to main content

Getting Started

Welcome to PRISM, the Manheim Design System​

PRISM enables every Manheim product team to more quickly deliver and optimize digital experiences with a coherent system of flexible, on-brand, modular UI components.

Communication on Slack or Teams channels is generally the best way to reach others with knowledge of the existing workflow for contributors.

Choose your role below to get started with PRISM.

DesignerDeveloperProduct Manager

Designers​

Good interaction and interface design begins with understanding our design environment, users, and standards. To that end, designers should thoroughly review the Foundations section of the PRISM Design System. We recommend you start with the following topics:

Developers​

Using a PRISM component in your project is just like using any other library.

Developers implement PRISM's reusable components to improve speed and consistency while delivering a best-in-class user experience. PRISM is created from the building blocks found in Bootstrap layered with React components. This provides a familiar syntax to element class names and treatments, while allowing for an unlimited amount of capabilities.

Use PRISM within your application whether it uses Bootstrap or React:

Quickstart​

If your project uses React and is already configured with Artifactory you can get started right away. In other cases, continue below to learn more about how to use Prism in your project.

// Existing projects may already be configured to access
// artifactory. If not, follow the instructions below.
import React from 'react';

// Typically, you can import from the full library.
import { Button } from '@prism/library'
import '@prism/styles/prism.comps.min.css';

// or '@prism/styles/prism/button.min.css'

function MyComponent() {
  return <Button variant="primary">Click Me</Button>
}

Using PRISM in Your Project​

In the following section, we will:

  1. Setup your project to be able to access artifactory
  2. Install PRISM packages (individually or the entire library)
  3. Use PRISM Styles and Components in your project

The PRISM javascript library is available as a single bundle or as individual components.

PRISM provides packages as CommonJS (CJS), ES Module (ESM), Immediately-invoked Function Expressions (IIFE), and SystemJS (SJS). The type of module used is often determined by the environment using the package, but each module type is available for direct use if needed.

In modern javascript applications, like create-react-app, PRISM will support code-splitting/lazy loading. However, this feature is still under development, so the best way to get only the code you want is to install individual components (i.e. @prism/button).

Using Artifactory​

Using the artifactory credentials script​

To use Prism in a React project, you will first need to setup npm/yarn to use the artifactory registry for Prism packages. We have created a script to help you get your artifcatory credentials and setup your .npmrc file.

To use the artifactory credentials script, you will need to either clone the Prism repository on to your local machine or download the artifcatory credentials script file Once the script is on your machine, you can execute it in your terminal by running:

sudo ./scripts/get_artifactory_creds.sh

The script will walk you through the process of getting your artifactory token, which you will use to complete your .npmrc file.

Updating Your .npmrc​

In order to install and use the Prism node modules, you will need to configure your package manager to use the artifactory registry. An easy way to do this is by using the .npmrc. This file is used to configure npm OR yarn to download @prism packages from the artifactory registry. If you are using yarn, the .npmrc will work just fine. You won't need a .yarnrc.

For this example, we will use an .npmrc in the project's root directory. Copy the example .npmrc into the root directory of your project and rename the file to .npmrc. Export the ARTIFACTORY_EMAIL and ARTIFACTORY_TOKEN generated by the artifactory credentials script into your system environment, like so:

export ARTIFACTORY_EMAIL=************** && export ARTIFACTORY_TOKEN=**************

Now, your package manager is ready to install @prism packages from artifactory.

Installing Prism​

Installing the Prism Styles Package​

Prism relies on css styles that are not packaged with the components or the library, so you will need to install them in your project prior to using the components.

yarn add @prism/styles

Once installed, you will need to import the styles into your project's entrypoint. Typically, this is a file at the root of your project directory or project src directory, called index.js, App.js, or Main.js. In the top of your entrypoint file, include the following line:

import '@prism/styles/prism.comps.min.css';
import '@prism/styles/icon-font.min.css'; // only if using @prism/icons without SVG.

If your project utilizes scss and you would like to import prism styles through your own scss pipeline, you may use @prism/scss, which includes all Sass files from the framework and all available themes.

Installing Prism Component Packages​

Prism is a modular library, so you can import individual components (recommended) OR the entire prism library into your project.

Individual components can be installed using:

yarn add @prism/button

The entire library can be installed using*:

yarn add @prism/library openseadragon

*When you install the library, you will need to also install the openseadragon module as a dependency of the multimedia viewer. This will be updated in a future release to remove this requirement.

Using PRISM​

You will need to import the component in the file where you intend to use the component.

If you installed an individual component:

import Button from @prism/button

If you installed the entire library:

import { Button } from @prism/library

That's it! Now you're using PRISM in your project!

Contributing to PRISM​

If you would like to make PRISM better, contributions can be made via pull request on Github.

  • Github
  • Site/Code Organization
  • Contributing Best Practices

Developer Resources​

Product Managers, Business Stakeholders, and Everyone Else​

What is a design system?​

Our PRISM design system is a coherent set of reusable, coded components, branding elements, and interaction patterns that can be combined in different ways to create digital products. Think of it as a set of digital LEGO® bricks that your team uses to build amazing, fully interactive client experiences.

How does a design system benefit our clients?​

Every component in the design system has been carefully thought out, built to exacting standards, and exhaustively tested. Out of the box, they include such built-in benefits as responsive design (they work well on both desktop and mobile) and hooks for analytics tagging. When we build all of our products using a design system, they share a common look and feel and work together seamlessly, so even new products feel familiar and easy to use.

Take a few minutes to peruse PRISM elements and components for inspiration on how you can evolve the user experience of your product. To learn more about how PRISM can benefit your users and development teams, contact prism@coxautoinc.com, or post a message on the #prism-community Slack channel.

Benefits of PRISM​

  • Efficiency - A build-it once model for most common components
  • Velocity - Prebuilt components lets designers and developers work more quickly
  • High-quality Code - Components are rigorously tested and embody our standards
  • Seamless Experience - Familiar interfaces across products builds client confidence
  • Cost Savings - We don't pay to design, build, test, or maintain duplicate components
  • Rigor - Our governance model guides enhancements and additions to the system