mekari-ui-toolkit
v1.0.32
Published
Mekari ui toolkit
Downloads
6,017
Readme
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.