npm package: @mekari/mekari-ui-toolkit
Description: Mekari ui toolkit
Author: Mekari
Latest version: 1.0.32

# Mekari UI Toolkit

## Introduction

**Mekari UI Toolkit** is a project with simple objective: *standardizing all Mekari's products user interface design*. It also aims to be the central repository of UI components and libraries for all Mekari's products, especially for Mekari's front end developers.

## UI specification

Mekari UI Toolkit is based on [this](https://projects.invisionapp.com/d/main/default/#/projects/prototypes/17249141) specification document.

## Before start

You need to install:

- ruby (recommended to use version >= 2.0.0)
- node (recommended to use version >= 10.0.0)

## Quick start

- Clone the repo
- Install depencency: `npm install`
- Run bundler inside root directory `bundle install` to install jekyll

## How to add icons
You can add new icon with guide from [this documentation](http://mekari-ui.sleekr.id/docs/1.0/getting-started/update-icons/).

## Build documentation localy

- Run `npm run start`

## Import CSS and JS

To import Mekari UI to your application. Currently Mekari UI supported on Node Package Manager (npm) and Rubygems (gem). Or you can directly download the files from dist folder on [Bitbucket repository](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/dist/). The content of the package can be seen on [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents) section.

### Using npm
If you want to use Mekari UI Toolkit using Node Package Manager, you can use the command below to install the package first:
```
npm install mekari-ui-toolkit
```
After that, you need to include the Mekari UI Toolkit's file into your apps. Here is example, in your `main.css` or `main.scss` (naming can be different on each apps) file:
```
@import "./node_modules/mekari-ui-toolkit/dist/css/full-bundle/mekari-ui.css"
```
List of the files inside the Mekari UI Toolkit can be found in [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents) section. The npm is tested and used mainly on apps with minimal node v10.

### Using gem
If you want to use Mekari UI Toolkit using Rubygems, you can use the command below to install the gem first:
```
gem install mekari_ui_toolkit
```
After that, you need to include the Mekari UI Toolkit's file into your apps. Here is example, in your `application.css` or `application.scss` (naming can be different on each apps) file:
```
$is-using-rubygems: true;
$font-path: #{"../../fonts/Roboto/Roboto-"};
$icon-font-path: "../../webfonts";
@import "css/full-bundle/mekari-ui.css";
```
`$is-using-rubygems` must set to `true` if you want to use gem. If not set to `true`, the fonts will not be found. This problem occurs because of the usage of relative path to find the fonts. `$font-path` and `$icon-font-path` can be changed to whatever path of the assets is. Just make sure, the assets is the same just like in `/dist/fonts` and `/dist/webfonts` of Mekari UI Toolkit. If the assets are different, the styling will be different and incorrect.
List of the files inside the Mekari UI Toolkit can be found in [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents) section. The gem is tested and used mainly on Ruby on Rails version 4.2 with ruby version 2.5.1.

### Using icons from GCS
Icons on Mekari UI also available on our GCS. To use this icons, you can set this configuration:
```
$is-using-gcs-font-path: true;
```

### Prefix on SCSS
#### $prefix
If there is already Bootstrap 3 in your apps, there might be some component with same class. The same name class will result in different behavior and styling of the component. To prevent this, Mekari UI has `$prefix` that can be added to `main.scss`. Here is the example:
```
$prefix: 'mk-';
@import "scss/main.scss";
```
Based on the code above, the `$prefix` is set to `mk-`. This means, the component's class that support `$prefix` will use prefix on its class. For example, class `.alert` on alert component will become `.mk-alert`.
Currently, not every class can use `$prefix` as its additional prefix. Here is list of components that support `$prefix`:
- Alert
- Badge
- Breadcrumb
- Button
- Dropdown
- Form
- Images
- Modal
- Pagination
- Tables
- Tabs
- Tooltip
- Class `.fade` and `.show`

#### $icon-font-family-prefix
Another prefix that can be added is `$icon-font-family-prefix`. The background story of this prefix is because there are a missing icon on some applications that use the older version of Mekari UI Toolkit simultaneously with Mekari UI Toolkit from npmjs and bitbucket. This problem happens because there are already a decalaration of `font-family` that will be used in Icon component on the older version of Mekari UI Toolkit. However, this older version has an older version of icon pack too. Because of that, some icon will be missing when we want to use icon from Mekari UI Toolkit from npmjs or bitbucket.

`$icon-font-family-prefix` is here to help mitigate this missing icon problem. The concept is to just add prefix to font-family that will be used in icon component. That prefix will make the font-family used in icon from Mekari UI Toolkit from npmjs or bitbucket different than the old one. Here is the example to use `$icon-font-family-prefix`:
```
$icon-font-family-prefix: 'mk-'
@import 'node_modules/@mekari/mekari-ui-toolkit/dist/scss/components/icons.scss';
```

## Contribute
Want to contribute to make Mekari UI better? You can follow the guideline [here](http://mekari-ui.sleekr.id/docs/1.0/publish-changes/).