\n \n\n\n\n## About The Project\n\nKeymaster is the shared visual and interactive language that guides how we build high-quality customer experience. It’s intended for use both internally at Unlock and externally by third-party developers and designers.\n\nMore specifically, we aim to:\n* Make it easier for our customers and partners to do business with us by obscuring organizational boundaries, channels and technology stacks.\n* Save time and money during the design and delivery phase.\n* Ease collaboration and align teams.\n\n
\n\n\n\n\n## Getting Started\n\n### Prerequisites\n\nThe design system has a few dependencies that you will need to install before you can use it.\n* [Bootstrap 5](https://getbootstrap.com/docs/)\n* [Sass](https://sass-lang.com/) (Optional: If you want to compile the Sass files yourself.)\n\nKeymaster also requires you to have [Bootstrap 5](https://getbootstrap.com/docs/) installed in your project as a peer-dependency.\nIf you do not have Bootstrap 5 installed, you can install it with the following command:\n\n```sh\nnpm install bootstrap@5\n```\n\nOptional:\nThis project utilizes sass and requires you to have [sass](https://npmjs.com/package/sass) to compile our sources.\nAlternatively, you can use the compiled CSS files in the `dist` folder.\nIf you do not have sass installed, you can install it with the following command:\n\n```sh\n// locally\nnpm install --save-dev sass\n\n\n// or globally\nnpm install -g sass\n```\n\n\n### Installation\nTo install `@unlk/keymaster` in your project with [npm](https://www.npmjs.com/), run the following command:\n\n```sh\nnpm install @unlk/keymaster\n```\n\n
\n\n\n\n\n## Usage\n\nTo use the keymaster design system, you will need to import the scss file into your project.\nThis will import all of keymaster's styles and variables into your project.\n\n```scss\n@import '@unlk/keymaster/scss/keymaster.scss';\n```\n\nAlternatively, if you want to use the precompiled css, you can import the compiled css file into your project.\n\n```css\n@import '@unlk/keymaster/dist/css/keymaster.css';\n```\n\nCompiled CSS can be loaded from CDN as well\n```html\n\n```\n\nYou will also need to import the keymaster's javascript dependencies into your project.\n\n```js\nimport '@unlk/keymaster/js/bootstrap.js';\n```\n\nCompiled JS can be loaded from CDN as well\n```html\n\n```\n\n
![\"Unlock](\"https://www.unlock.com/app/uploads/icon-1.svg\"){kind=icon}
\n\n