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.

npm