npm:@citizenplane/pimp

README

Pimp is a components library that contains a set of polished Vue components.

Pimp mission

Pimp aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.

Installation

pimp components are served as an npm package.

Add them to your project by running:

// with npm
npm install @citizenplane/pimp

// with yarn
yarn add @citizenplane/pimp

Usage

In a nuxt project

Add this line to your nuxt-config.js:

// nuxt-config.js
...
css: [
  { src: '@citizenplane/pimp/dist/pimp.css' },
],
...

Include any of our components in your project and use it:

<template>
  <cp-button appearance="primary" color="purple" />
</template>
<script>
import CpButton from '@citizenplane/pimp'

export default {
  components: {
    CpButton,
  },
}
</script>

If you want to use any component without having to import them manually, you can create a plugin:

Create a plugin called citizenplane-pimp.js:

// ~/plugins/citizenplane-pimp.js

import Vue from 'vue'
import Pimp from '@citizenplane/pimp'

Vue.use(Pimp)

Add this line to your nuxt-config.js:

// nuxt-config.js
...
plugins: [
  { src: '~plugins/citizenplane-pimp.js' },
]
...

Use components directly in your project without having to import nor declaring them:

<template>
  <cp-button appearance="primary" color="purple" />
</template>

Components

Now that you're all set up, you can retrieve components documentation on pimp.citizenplane.com.

CitizenPlane's design system hero banner

🧑‍💻 Contributing to Pimp

We are working on making this project a fully open source. We appreciate any contributions you might make.

🍴 Step 1. Fork this repository

In order to contribute to Pimp, you need to fork this repo, and develop on your own local clone.

If you don't know how to do so, follow this guide!

📖 Step 2. Get playground up and running

First, move into your local cloned repository with the help of cd, after that install your node_modules with:

// with npm
npm install

To actually start seeing the components you have to run the project with the command:

npm run dev

Now go to http://localhost:8080 in your browser.

🛠 Step 3. Make your changes

Now you can start developing!

All the components are under the src/components/ directory and associated code changes will automatically be reflected in the playground.

In order to run the documentation page locally, run these commands in your terminal:

cd docs
npm install
npm run dev

Now you can visit http://localhost:8080/ in your browser.

Documentation code is under the docs directory. A big portion of these docs are written in markdown using Vuepress, if you've never used Vuepress before, check out these docs.

🏆 Step 4. Making your pull request

To be done

🥂 Step 5. Pat yourself on the back

Congrats, you're officially a Pimp contributor!

Feedback

We want to provide only components of the highest quality. We can’t do that without your feedback. If you have any suggestions about what we can do to improve components, please report it directly as an issue or drop us a line at tech@citizenplane.com.

👏 Respect earns Respect

Please respect our Code of Conduct, in short:

Using welcoming and inclusive language
Being respectful of differing viewpoints and experiences
Gracefully accepting constructive criticism
Focusing on what is best for the community
Showing empathy towards other community members

License

Pimp is released under the MIT license.

Usage no npm install needed!