A 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:
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';
`,
},
},
},
}
We use ESLint and Stylelint. To run the linter on your files, run the following command:
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:
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:
npm run uikit-copy
In an app (like study
or teach
):
npm run uikit-paste