Pocket Prep UI Kit
A package containing globally used styles, SCSS variables + mixins, fonts, assets, and Vue components.
Installation
To install the UI Kit on an app, first run the NPM install command in your project:
npm i @pocketprep/ui-kit
Then import the appropriate scss
file from the installed package into your project wherever it is needed.
For example, to use the UI Kit colors in a Vue component, add the following to the Vue component's <styles>
block:
@import '~@pocketprep/ui-kit/colors';
To import the styles into your Vue app globally, add the following code to your vue.config.js
file:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '@import "~@pocketprep/ui-kit/pocketprep.scss";',
},
},
},
}
Linting
We use ESLint and Stylelint. To run the linter on your files, run the following command:
npm run lint
Versioning
In order to increment the ui-kit
version when a change is made, you have to make sure you update both the package.json
and the package-lock.json
files. In order to do so and stage the commit, run the following command:
npm run patch
This command will queue up the version increment.