@pocketprep/ui-kit
v3.4.82
Published
Pocket Prep UI Kit
Downloads
1,167
Readme
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: `
@import '@pocketprep/ui-kit/breakpoints';
@import '@pocketprep/ui-kit/colors';
`,
},
},
},
}
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