@mekari/mekari-ui-toolkit

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

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