npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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.