# quipper-ds

> ## Installation

Latest version **5.0.0** (published 2020-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install quipper-ds
pnpm add quipper-ds
yarn add quipper-ds
bun add quipper-ds
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2020-11-16 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 824.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eugie Limpin |
| Maintainers | galacemiguel, eugielimpin |

## Links

- npm: https://www.npmjs.com/package/quipper-ds
- npm.io page: https://npm.io/package/quipper-ds

## Recent versions

- 5.0.0 (latest) — 2020-11-16
- 4.1.0 — 2020-11-14
- 4.0.0 — 2020-11-14
- 3.0.0 — 2020-11-09
- 2.0.0 — 2020-09-10
- 1.0.1 — 2020-09-08

## README

# Quipper Design System

## Installation

The Quipper design system is built on [Tailwind CSS](https://tailwindcss.com/). To take full advantage of its features, you need to set up Tailwind with your project's build system. For that, you may follow their [installation guide](https://tailwindcss.com/docs/installation).

Once you have it set up, install the Quipper Design System:

```bash
npm install --save-dev quipper-ds
```

Essentially `quipper-ds` is a packaged Tailwind configuration that you will need to import into your project's own Tailwind config file:

```js
// tailwind.config.js

var {
  theme: quipperDsTheme,
  plugins: quipperDsPlugins,
} = require("quipper-ds");

module.exports = {
  purge: [],
  theme: quipperDsTheme,
  variants: {},
  plugins: quipperDsPlugins,
};
```

That's it! You should now be able to use Quipper design system tokens in your app via Tailwind's utility classes.

### No-build Set-up

> Do this only if you want to test out the design system before fully integrating it into your project. This method is **not production-ready and will slow your app's load time**.

If you need to get started right away, you can also just link to the design system stylesheet directly in the `<head>` of your html:

```html
<link href="https://unpkg.com/quipper-ds/index.css" rel="stylesheet" />
```

## Fonts

Webfont assets are deliberately omitted from this project to allow for flexibility in importing only the fonts that are necessary for your app. You will need to load them yourself for type styles to render correctly.

## Style Guide

Once you're set up, you can use [Tailwind Config Viewer](https://github.com/rogden/tailwind-config-viewer) to find out what classes are available to you to style your app. Just run the following from your project folder and a cheatsheet corresponding to your Tailwind config file will open up in your browser automatically:

```bash
npx tailwind-config-viewer -o
```

---
_Source: https://npm.io/package/quipper-ds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._