CSS UI Kit using BEM in class naming standard.

Homepage

https://mazipan.github.io/bem-kit/

Why BEM-Kit ?

• Using beautiful classname with BEM standard.
• All component was crafted from zero.
• You can choose to import RULES only without produce any css classes.
• You can customize your own classname with rules we provided.
• You can partialy import from our available component.
• Full SASS modular code.

Download

npm install bem-kit --save
-- OR --
yarn add bem-kit

Or download latest release here : https://github.com/mazipan/bem-kit/releases

Demo And Cheatsheet

https://mazipan.github.io/bem-kit/demo/

Usage

Using CSS Native :

<link  rel="stylesheet" href="{URL_PATH}/css/bem-kit.min.css" rel="stylesheet"/>

Using SASS Import :

// if you want import all classes
@import "./bem-kit/src/bem-kit.scss";


// if you want import RULES only without classes
@import "./bem-kit/src/_bem-kit";

Added Javascript Functionality (Optional)

<script type="text/javascript" src="{URL_PATH}/js/jquery.min.js"></script>
<script type="text/javascript" src="{URL_PATH}/js/bem-kit.min.js"></script>

Supported Component (in alphabetical order)

• alert
• button (basic, outline, radius, dropdown)
• card
• checkbox (black and blue theme)
• form
• grid system (traditional grid and flex)
• modal (white and blue theme)
• pagination (basic and radius)
• popover (dark theme)
• radio (black and blue theme)
• select
• table (support sort arrow view)
• tabs (horizontal and vertical)
• textfield (basic for input text and textarea)

Using Technology

• SASS
• HTML
• NodeJS, Gulp, etc.

License

MIT License

Hope will usefull for you all. Question ? please email : mazipanneh@gmail.com