How to use

We can use BEM-Kit in various methods, like below :

Via HTML

We can include BEM-Kit from our HTML with link tag like usual :

<link rel="stylesheet" href="https://mazipan.github.io/bem-kit/dist/bem-kit.min.css"/>

Via SASS (all classes)

We can import all classes in BEM-Kit via SASS import like :

@import "~/bem-kit/src/bem-kit.scss";

Via SASS (just our mixins)

We can threat BEM-Kit as SASS Framework that serve many helpers and mixins, you just need import our mixins file :

@import "~/bem-kit/src/_all-mixins.scss";

with this import you can do all our mixins style in your SASS, like :

@include clearfix();
@include row();
@include border-radius(.25em);
// etc

also you will have all our base variable like colors and friends.

Via SASS (all of our rules)

If our mixins is not enough for you and you all of our rules like our buttons, grids, etc but hate our BEM style and prefer to use your own classes, you can import our rules

@import "~/bem-kit/src/_all-mixins.scss";
@import "~/bem-kit/src/_all-rules.scss";

If you like to use our base setup and normalize.css, you can easy import :

@import "~/bem-kit/src/_bem-kit.scss";

with this import you can do all our rules style in your SASS, like :

.btn {
  @extend %button;
  @extend %button--orange;
}

Add Javascript functionality

If you using tabs, popover or modal you will need our javascript, so please include in your HTML

<script type="text/javascript" src="{URL_PATH}/js/jquery.min.js"></script>
<script type="text/javascript" src="https://mazipan.github.io/bem-kit/dist/bem-kit.js"></script>

Currently we still need depedency jQuery, in the future we want remove jQuery depedency