Awesome-BEMCSS

Lightweight CSS framework that build in top of SASS with BEM CSS convention as alternative of Twitter Bootstrap.

Download Fork on Github

AwesomeBemCSS (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/awesome-bemcss

How to use

Using CSS Native : 

<!-- awesome-bemcss css depedency -->
<link  rel="stylesheet" href="{URL_PATH}/css/awesome-bemcss.min.css" rel="stylesheet"/>

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

<!-- awesome-bemcss js depedency - {optional - if you want use the script} -->
<script type="text/javascript" src="{URL_PATH}/js/awesome-bemcss.min.js"></script>
Using SASS Import : 

<!-- import from your sass file -->
@import "./awesome-bemcss/src/scss/_awesome-bemcss";

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>

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>