Booterial

Booterial is a small .css and .js files for Twitter Bootstrap that gives You the look & feel of Material Design

View on GitHub Download .zip

Overview

What is Booterial?

Booterial is a small .css and .js files (You may consider it as snippets) that adds an effects to the standard Bootstrap components.

Booterial does not required any extra HTML or abracadabra so that it works, Booterial is using the Twitter Bootstrap Offcial Documentation for the markup.

Getting Started

$ git clone https://github.com/elmahdim/booterial.git

How To Use

Yet there's only 2 classes to use has-effect and has-label

Class Used for (elements, classes) Effect
has-effect
  • .btn
  • .list-group-item
 Ripple
has-label
  • .form-group
 <label> transition
More are coming soon...

Buttons

<any class="btn btn-* has-effect">...</any>

Form group with <label>

<div class="form-group has-label">
  <input type="email" class="form-control" />
  <label>...</label>
</div>

List groups

Cras justo odio Dapibus ac facilisis in Morbi leo risus

List group item heading

...

List group item heading

...

 
<!-- List group item -->
<div class="list-group">
  <a href="" class="list-group-item has-effect active">... </a>
  <a href="" class="list-group-item has-effect">...</a>
</div>

<!-- List group item heading -->
<div class="list-group">
  <a href="" class="list-group-item has-effect active">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
  <a href="" class="list-group-item  has-effect">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Alert (notification)

Well done! 
<div class="alert alert-* alert-dismissible alert-[sm | md | lg] 
     stickto-[parent | window] md-[top | right | bottom | left]">

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">×</span>
</button> 
...  </div>