BEM KIT

CSS UI Kit using BEM in class naming standard

Homepage Download Source Code

BEM KIT (demo and cheatsheet)

Overview

Blocks, Elements and Modifiers

Blocks : Standalone entity that is meaningful on its own.
Examples : header, container, menu, checkbox, input

Element : Parts of a block and have no standalone meaning. They are semantically tied to its block.
Examples : menu item, list item, checkbox caption, header title

Modifier : Flags on blocks or elements. Use them to change appearance or behavior.
Examples : disabled, highlighted, checked, fixed, size big, color yellow

Further Reading : http://getbem.com/introduction/

See Github Repo : https://github.com/mazipan/bem-kit

How to use

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";

// if you want import RULES only without classes
@import "./bem-kit/src/_bem-kit";
Added Javascript Functionality (Optional) : 

<!-- jquery library {optional - if you want use the script} -->
<script type="text/javascript" src="{URL_PATH}/js/jquery.min.js"></script>

<!-- bem-kit js depedency - {optional - if you want use the script} -->
<script type="text/javascript" src="{URL_PATH}/js/bem-kit.min.js"></script>

Typography

Heading

h1

h2

h3

h4

h5

Paragraph

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Grids

Row And Columns

grid__row (total col in row = 12)
grid__col-12
grid__col-3
grid__col-3
grid__col-10
grid__offset-1
grid__offset-2
grid__offset-3

<!-- snippet code for grid -->
<div class="grid">
  <div class="grid__row">grid__row (total col in row = 12)</div>
  <div class="grid__row">
    <div class="grid__col-12">grid__col-12</div>
  </div> 
  <div class="grid__row">
    <div class="grid__col-3">grid__col-3</div>
    <div class="grid__col-3">grid__col-3</div>
    <div class="grid__col-6">grid__col-6</div>
  </div>
  <div class="grid__row">
    <div class="grid__offset-1">grid__offset-1</div>
  </div>
  <div class="grid__row">
    <div class="grid__offset-2">grid__offset-2</div>
  </div>
  <div class="grid__row">
    <div class="grid__offset-3">grid__offset-3</div>
  </div>
</div>

Flex Box

div in flex box
div in flex box
div in flex box
div in flex box
div in flex box
div in flex box
div in flex box

<!-- snippet code for grid with flex -->
<div class="grid__flex">
  <div class="grid__item">div in flex box</div>
  <div class="grid__item">div in flex box</div>
  <div class="grid__item">div in flex box</div>
</div>

Labels

Label Flat

label--green 99 label--red 99 label--blue 99 label--orange 99 label--gray 99

Label Radius

label--green 99 label--red 99 label--blue 99 label--orange 99 label--gray 99

Label Outline

label--green 99 label--red 99 label--blue 99 label--orange 99 label--gray 99

Label Outline Radius

label--green 99 label--red 99 label--blue 99 label--orange 99 label--gray 99

Buttons

Button


<!-- snippet code for button -->
<button class="button button--green">button button--green</button>
<button class="button button--red">button button--red</button>
<button class="button button--blue">button button--blue</button>
<button class="button button--orange">button button--orange</button>
<button class="button button--gray">button button--gray</button>

Button Link

button--green button--red button--blue button--orange button--gray 

<!-- snippet code for button -->
<a href="javascript:void(0)" class="button button--green">button button--green</a>
<a href="javascript:void(0)" class="button button--red">button button--red</a>
<a href="javascript:void(0)" class="button button--blue">button button--blue</a>
<a href="javascript:void(0)" class="button button--orange">button button--orange</a>
<a href="javascript:void(0)" class="button button--gray">button button--gray</a>

Buttons Outline


<!-- snippet code for button -->
<button class="button button-outline--green">button button-outline--green</button>
<button class="button button-outline--red">button button-outline--red</button>
<button class="button button-outline--blue">button button-outline--blue</button>
<button class="button button-outline--orange">button button-outline--orange</button>
<button class="button button-outline--gray">button button-outline--gray</button>

Button Radius


<!-- snippet code for button -->
<button class="button button--radius button--green">button button--radius button--green</button>
<button class="button button--radius button--red">button button--radius button--red</button>
<button class="button button--radius button--blue">button button--radius button--blue</button>
<button class="button button--radius button--orange">button button--radius button--orange</button>
<button class="button button--radius button--gray">button button--radius button--gray</button>

Buttons Dropdown


<!-- snippet code for button--dropdown -->
<button class="button button--dropdown button--gray">
  <i class="fa fa-cog"></i> 

  <ul class="button__menu" role="menu">
    <li><a href="#">25</a></li>
    <li><a href="#">50</a></li>
    <li><a href="#">100</a></li>
  </ul>
</button>

Forms

Textfield

This is helper text This is helper error message

Text Area


<!-- snippet code for textfield -->
<input class="textfield" id="textfield-1" placeholder="textfield" />
<input class="textfield textfield--shadow" id="textfield-2" placeholder="textfield textfield--shadow"/>
<input class="textfield textfield--error" id="textfield-3" placeholder="textfield textfield--error"/>
<input class="textfield textfield--radius" id="textfield-4" placeholder="textfield textfield--radius"/>
<input class="textfield textfield--large" id="textfield-5" placeholder="textfield textfield--large" />
<span class="textfield__helper">This is helper text<span>
<span class="textfield__error">This is helper error message<span>

Input Select Box


<!-- snippet code for select -->
<select class="select" id="select_box-1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Checkboxes


<!-- snippet code for checkbox -->
<input class="checkbox" type="checkbox" id="checkbox-1" name"checkbox"/>
<label for="checkbox-1">Check 1</label>
<input class="checkbox" type="checkbox" id="checkbox-2" name"checkbox"/>
<label for="checkbox-2">Check 2</label>
<input class="checkbox" type="checkbox" id="checkbox-3" name"checkbox"/>
<label for="checkbox-3">Check 3</label>

Radio


<!-- snippet code for radio -->
<input class="radio" type="radio" id="radio-1" name"radio"/>
<label for="radio-1">Yes</label>
<input class="radio" type="radio" id="radio-2" name"radio"/>
<label for="radio-2">No</label>
<input class="radio" type="radio" id="radio-3" name"radio--blue"/>
<label for="radio-3">Yes</label>
<input class="radio" type="radio" id="radio-4" name"radio--blue"/>
<label for="radio-4">No</label>

Form Group

I am label :
I am required label :
I am label :
I am label :
Rp.
@gmail.com

Alert

x Info! alert alert--radius alert--green
x Info! alert alert--radius alert--red
x Info! alert alert--radius alert--blue
x Info! alert alert--radius alert--orange
x Info! alert alert--radius alert--gray 

<!-- snippet code for alert -->
<div class="alert alert--radius alert--green">
  <a href="javascript:void(0)" class="alert__close">x</a>
  <strong>Info!</strong> alert alert--radius alert--green
</div> 
<div class="alert alert--radius alert--red">
  <a href="javascript:void(0)" class="alert__close">x</a>
  <strong>Info!</strong> alert alert--radius alert--red
</div> 
<div class="alert alert--radius alert--blue">
  <a href="javascript:void(0)" class="alert__close">x</a>
  <strong>Info!</strong> alert alert--radius alert--blue
</div> 
<div class="alert alert--radius alert--orange">
  <a href="javascript:void(0)" class="alert__close">x</a>
  <strong>Info!</strong> alert alert--radius alert--orange
</div> 
<div class="alert alert--radius alert--gray">
  <a href="javascript:void(0)" class="alert__close">x</a>
  <strong>Info!</strong> alert alert--radius alert--gray
</div>

Popover

Hover Me, I am popover !
Hello, I am popover__content ! 

<!-- snippet code for popover -->
<div class="popover">
  <span>Hover Me, I am popover !</span>
  <div class="popover__content">
    Hello, I am popover__content !
  </div>
</div>

Tabs

Tabs Horizontal

<!-- snippet code for tabs -->
<ul class="tabs">
  <li class="tabs__item tabs__item--active" data-target="#overview">
    <a href="#overview">Overview</a>
  </li>
  <li class="tabs__item" data-target="#typography">
    <a href="#typography">Typography</a>
  </li>
  <li class="tabs__item" data-target="#grids">
    <a href="#grids">Grids</a>
  </li>
  <li class="tabs__item" data-target="#buttons">
    <a href="#buttons">Buttons</a>
  </li>
  <li class="tabs__item" data-target="#forms">
    <a href="#forms">Forms</a>
  </li>
  <li class="tabs__item" data-target="#table">
    <a href="#table">Table</a>
  </li>
</ul>
Tabs Vertical

<!-- snippet code for tabs vertical -->
<ul class="tabs tabs--vertical">
  <li class="tabs__itemv tabs__itemv--active" data-target="#overview">
    <a href="#overview">Overview</a>
  </li>
  <li class="tabs__itemv" data-target="#typography">
    <a href="#typography">Typography</a>
  </li>
  <li class="tabs__itemv" data-target="#grids">
    <a href="#grids">Grids</a>
  </li>
  <li class="tabs__itemv" data-target="#buttons">
    <a href="#buttons">Buttons</a>
  </li>
  <li class="tabs__itemv" data-target="#forms">
    <a href="#forms">Forms</a>
  </li>
  <li class="tabs__itemv" data-target="#table">
    <a href="#table">Table</a>
  </li>
</ul>

Card

Card Flat

Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content

Card Radius

Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content
Title Card
Sample of content 

<!-- snippet code for card -->
<div class="card card--green">card card--green</div>
<div class="card card--green card--radius">card card--gray card--radius</div>

Modal


<!-- snippet code for modal button trigger -->
<button class="button button--blue" data-show="modal" data-target="modalPlain">
  Open Modal 
</button>
<button class="button button--blue" data-show="modal" data-target="modalBlue">
  Open Modal 
</button>
<button class="button button--blue" data-show="modal" data-target="modalBorder">
  Open Modal 
</button>

<!-- snippet code for modal varian -->
<div id="modalPlain" class="modal" role="modal">
  <div class="modal__content">
    <div class="modal__header">
      <span class="modal__close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal__body">
      <p>Some text in the Modal Body</p>
    </div>
    <div class="modal__footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

<div id="modalBlue" class="modal" role="modal">
  <div class="modal__content">
    <div class="modal__header modal__header--blue">
      <span class="modal__close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal__body">
      <p>Some text in the Modal Body</p>
    </div>
    <div class="modal__footer modal__footer--blue">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

<div id="modalBorder" class="modal" role="modal">
  <div class="modal__content">
    <div class="modal__header modal__header--border">
      <span class="modal__close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal__body">
      <p>Some text in the Modal Body</p>
    </div>
    <div class="modal__footer modal__footer--border">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

Table

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<!-- snippet code for table -->
<table class="table">
  <thead class="table__head">
    <tr>
      <th class="table__sort--asc" sortable="true">#</th>
      <th class="table__sort--desc" sortable="true">First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody class="table__body">
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
 </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Pagination


<!-- snippet code for pager -->
<ul class="pager"> 
  <li> 
    <a href="javascript:void(0)" class="pager__page">Previous</a> 
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">1</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">2</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">3</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">4</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">5</a>
  </li> 
  <li> 
    <a href="javascript:void(0)" class="pager__page">Next</a> 
  </li> 
</ul>

<!-- snippet code for pager--radius -->
<ul class="pager pager--radius"> 
  <li> 
    <a href="javascript:void(0)" class="pager__page">Previous</a> 
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">1</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">2</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">3</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">4</a>
  </li> 
  <li>
    <a href="javascript:void(0)" class="pager__page">5</a>
  </li> 
  <li> 
    <a href="javascript:void(0)" class="pager__page">Next</a> 
  </li> 
</ul>

Badge

Mazipan 1 Mazipan 1 new 

<!-- snippet code for Badge -->
<div class="badge">
  <a href="javascript:void(0)" class="badge__item">Mazipan <span class="badge__info ">1</span></a>
  <a href="javascript:void(0)" class="badge__item">Mazipan <span class="badge__info badge--state-new">1 new</span></a>
</div>