Design System that powers the Paquette ecosystem
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
build
playground
src
types
.editorconfig
.eslintrc.js
.gitignore
.npmignore
.nvmrc
.prettierrc
.stylelintrc
.travis.yml
LICENSE
README.md
jest.config.js
package.json
postcss.config.js
tsconfig.json
yarn.lock

README.md

Paquette Wordmark

User Interface (UI)

CI Build NPM Version Commitizen friendly GitHub Latest Release GitHub Top Language GitHub Languages Count GitHub Commit History GitHub Code Size GitHub License

Introduction

The Paquette UI (User Interface) is a component library that plays nicely with both React and Vue, sourcing styles from a central set of SCSS stylesheets. It's also the design language that powers the Paquette Application eco-system.

Installation

Yarn

yarn add @paquette/ui

NPM

npm install @paquette/ui

Vue

It's recommended you import the associated CSS file with the framework. This has a custom-mapped set of classes that will match with the output of the components.

import Vue from 'vue'
import UI from '@paquette/ui'

Vue.use(UI)

React

It's recommended you import the associated CSS file with the framework. This has a custom-mapped set of classes that will match with the output of the components.

import React from 'react'
import { Button } from '@paquette/ui/react'

export default () => {
  return <Button>Button</Button>
}

Styles

CSS

The stylesheets are conveniently compiled down into two CSS files (paquette.css and index.css), as well as provided as a full SCSS source for easy manipulation and variable overrides.

  • paquette.css provides the complete sequence of classes and styles.
  • index.css provides only the scaffolding base. Like normalize, but cooler, cause it's Paquette.

SCSS

Similar to the CSS files, the SCSS provided is an exact copy of the styles folder, just brough to the root, and renamed to scss

  • paquette.scss provides an order-specific import to the variables, mixins, base scaffolding and classes.
  • index.scss provides an order-specific import to the variables, mixins, base scaffolding, but NOT the classes.
@import '~@paquette/ui/styles/paquette'; // Receive complete style set
@import '~@paquette/ui/styles/index'; // Receive base styles, variables and mixins

You can also target some specific helper files.

  • _variables.scss import all of the variables (no output styles)
  • _mixins.scss import all of the mixins (no output styles)
  • _classes.scss import all of the classes (this will output styles)
  • _base.scss import all of the base styles (this will output styles)

Quick Start

Thanks to the amazing work that goes into CodeSandbox, ready-made demos are available for you to test out right now!

Contributing

Checkout the Contributing Guidelines

Licensing

MIT © Paquette Company