## About The Project
Keymaster 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.
More specifically, we aim to:
* Make it easier for our customers and partners to do business with us by obscuring organizational boundaries, channels and technology stacks.
* Save time and money during the design and delivery phase.
* Ease collaboration and align teams.
## Getting Started
### Prerequisites
The design system has a few dependencies that you will need to install before you can use it.
* [Bootstrap 5](https://getbootstrap.com/docs/)
* [Sass](https://sass-lang.com/) (Optional: If you want to compile the Sass files yourself.)
Keymaster also requires you to have [Bootstrap 5](https://getbootstrap.com/docs/) installed in your project as a peer-dependency.
If you do not have Bootstrap 5 installed, you can install it with the following command:
```sh
npm install bootstrap@5
```
Optional:
This project utilizes sass and requires you to have [sass](https://npmjs.com/package/sass) to compile our sources.
Alternatively, you can use the compiled CSS files in the `dist` folder.
If you do not have sass installed, you can install it with the following command:
```sh
// locally
npm install --save-dev sass
// or globally
npm install -g sass
```
### Installation
To install `@unlk/keymaster` in your project with [npm](https://www.npmjs.com/), run the following command:
```sh
npm install @unlk/keymaster
```
## Usage
To use the keymaster design system, you will need to import the scss file into your project.
This will import all of keymaster's styles and variables into your project.
```scss
@import '@unlk/keymaster/scss/keymaster.scss';
```
Alternatively, if you want to use the precompiled css, you can import the compiled css file into your project.
```css
@import '@unlk/keymaster/dist/css/keymaster.css';
```
Compiled CSS can be loaded from CDN as well
```html
```
You will also need to import the keymaster's javascript dependencies into your project.
```js
import '@unlk/keymaster/js/bootstrap.js';
```
Compiled JS can be loaded from CDN as well
```html
```
