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

To import the UI Kit's exported stylesheets in a vite context:

import '@pocketprep/ui-kit/normalize'
import '@pocketprep/ui-kit/fonts'
import '@pocketprep/ui-kit/styles'

To import the color variables and breakpoint mixin into your Vue app components globally, add the following code to your vite.config.js file:

module.exports = {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                @use '@/styles/breakpoints' as *;
                @use '@/styles/colors' as *;
                `,
            },
        },
    },
}

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.

Testing the package in apps

We have script commands to help copy and paste the UI Kit package into an app's node_modules:

In the UI Kit:

npm run uikit-copy

In an app (like study or teach):

npm run uikit-paste