@nasa-jpl/explorer-1

Explorer 1: JPL's Design System

Table of contents

• What's included
  • Published Packages
  • Tailwind
• Getting Started
• Contributing Developers
• V2 to V3 Migration

What's included

This package includes all frontend assets (JS and CSS) necessary to use Explorer-1 components in your project. Branding guidelines, available components and usage examples can be found in the Explorer 1 Storybook.

Version 3 adds a Vue component library and also introduces a monorepo structure. The Storybook has evolved to include all Vue components, internal-only components (i.e. our HTML components), and legacy V2 docs.

Published Packages

• @explorer-1/vue: Vue components
• @explorer-1/common: Static assets and shared assets between @explorer-1/vue

Other available packages, though generally unnecessary

These packages are used for Storybook only.

• @explorer-1/vue-storybook
• @explorer-1/html-storybook
• @explorer-1/storybook-common

Tailwind

Explorer 1's CSS classes are generated from our custom Tailwind CSS configuration. Tailwind CSS is a utility-first CSS framework, and Explorer 1's CSS class names are based on this model. Learn more about how to use Tailwind CSS.

Getting Started

There are two ways to integrate Explorer-1 with your project. You can either 1) use the Vue component library or 2) use the compiled assets with your own component library or HTML

• Use the Vue component library (requires the Vue.js framework)
• Use compiled assets (compatible with other frameworks)

Contributing Developers

See the contributing guide for guidance.

V2 to V3 Migration

See the Migration Guide.