Pocket Prep UI Kit
npm install @pocketprep/ui-kitA package containing globally used styles, SCSS variables + mixins, fonts, assets, and Vue components.
To install the UI Kit on an app, first run the NPM install command in your project:
``bash`
npm i @pocketprep/ui-kit
To import the UI Kit's exported stylesheets in a vite context:
`ts`
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:
`pre
module.exports = {
css: {
preprocessorOptions: {
scss: {
additionalData:
@use '@/styles/breakpoints' as *;
@use '@/styles/colors' as *;
,`
},
},
},
}
We use ESLint and Stylelint. To run the linter on your files, run the following command:
`bash`
npm run lint
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:
`bash`
npm run patch
This command will queue up the version increment.
We have script commands to help copy and paste the UI Kit package into an app's node_modules:
In the UI Kit:
`bash`
npm run uikit-copy
In an app (like study or teach):
`bash``
npm run uikit-paste