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.

To request an addition, enhancement, or exception, submit a PRISM change request and your request will be reviewed via the PRISM governance process.

Choose your role below to get started with PRISM.

Designers

Good interaction and interface design begins with understanding the design environment 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:

Resources for designers

Interaction designers should download and explore the Axure Template for interactive wire-framing and specifications, concepts, and prototyping.

Download the Axure Template

Visual designers should download the Sketch Template for creating high-fidelity visual comps and specifications.

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:

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';

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 enables

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 your 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.

Benefits of PRISM

  • Efficiency - A build-it once mechanic for most common components
  • Velocity - Pulling prebuild component lets designers and developers fully
  • 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