🎡 Pier Design System

Pier Design System is an open source presentational design system and React component library built by product designers at GumGum. Pier's documentation is built with Next.js that's bootstrapped with create-next-app.

💾 Install

To install Pier run

npm i pier-design-system

or if using yarn

yarn add pier-design-system

💡 Usage

To include Pier in a vanilla HTML project, include this at the head of your document

<link rel="stylesheet" href="~pier-design-system/dist/styles.css">

To import Pier into your own scss style sheet use

@import '~pier-design-system/dist/styles'

Import Pier's React components like so

import { Heading, BodyText } from 'pier-design-system'

Please refer to Pier's documentation to see the component library and utilties.

🍴 Forking and Developing

Node Version: v14.16

Package Manager: Yarn

1. Initialize Repo

Install all the necessary dependencies.

yarn

2. Run the Development Server

Runs live at http://localhost:3000

yarn dev

3. Start Developing!

You can start editing Pier's components and styles by navigating to the folder src/pier-design system. The documentation API is handled locally inside src/documentation and the Next.js documentation pages are inside src/pages.

Resources

• Pier Design System
• Github
• NPM Package
• Next.js Documentation
• React Docs
• SCSS-Lang
• GumGum Git Work Flow
• Git-Flow Cheatsheet