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.

Built With

Getting Started

Prerequisites

The design system has a few dependencies that you will need to install before you can use it.

• Bootstrap 5
• Sass (Optional: If you want to compile the Sass files yourself.)

Keymaster also requires you to have Bootstrap 5 installed in your project as a peer-dependency. If you do not have Bootstrap 5 installed, you can install it with the following command:

npm install bootstrap@5

Optional: This project utilizes sass and requires you to have 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:

// locally
npm install --save-dev sass


// or globally
npm install -g sass

Installation

To install @unlk/keymaster in your project with npm, run the following command:

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.

@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.

@import '@unlk/keymaster/dist/css/keymaster.css';

Compiled CSS can be loaded from CDN as well

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unlk/keymaster/dist/css/keymaster.min.css" crossorigin="anonymous"/>

You will also need to import the keymaster's javascript dependencies into your project.

import '@unlk/keymaster/js/bootstrap.js';

Compiled JS can be loaded from CDN as well

<script src="https://cdn.jsdelivr.net/npm/@unlk/keymaster/dist/js/keymaster.min.js" crossorigin="anonymous"></script>