Material Design version
Discover new Make Material Design style. It's first version and new elements will come in future version.
Material design is based upon the material design principle developed by Google. It's made with Bootstrap and Jquery. Theme uses Bootstrap Material Design (Bootstrap material design and some custom elements.
See Google Material Design Website See Demo
What is New with Material Design template?
We have integrated main elements defined by Material Design:
Material Design Colors
Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.. Color palette is provided by Materialize.
How to add a color?
On Material design color page, you just have to copy and name of the color and use it as a class for the element you want to change color.
For example, if you want a card with a blue background, you will for example this:
<div class="card light-blue darken-4"> // YOUR CONTENT </div>
What about text color?
You can use this color palette for text color too.
For example, if you want a paragraph with a blue color, you will for example this:
<div class="card light-blue-text text-darken-4"> // YOUR CONTENT </div>See Material Design Colors
Material Design Buttons
These buttons have specific colors and have animation on hover and click. For example, when you click on a button, a wave effect will appear.
You don't have to add specific classes to use Material Design buttons. You will find more info in documentation about buttons here.
Material Design Cards
A card is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
Simple Card
Here is a simple markup for basic card:
<div class="card medium">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
Card with Image
You can add small, medium or large class to your card to have small, medium or large image:
<div class="card">
<div class="card-image">
<img src="../assets/global/images/gallery/4.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
Card Reveal
Here is a simple markup for basic card:
<div class="card">
<div class="card-image">
<img class="activator" src="../assets/global/images/gallery/6.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title <i class="mdi-navigation-more-vert f-right"></i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close f-right"></i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
Material Design Icons
Material Design for Bootstrap includes 490 original Material Design icons! These icons are extracted from the original Google sources. They are provided as an iconic and easy to use font. Just hover icon on Material design icons to see his classname.
Here is an example of an icon:
<i class="mdi-action-3d-rotation"></i>
Material Design Forms
You will find demo of all forms elements in Material Design form page.
Radio Inputs
To use it, just apply md-radio class to your input this way:
<div class="radio radio-primary">
<label>
<input type="radio" name="r-primary" value="option1" checked="" class="md-radio">
Always
</label>
</div>
Checkbox Inputs
To use it, just apply md-checkbox class to your input this way:
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox" name="r-primary" value="option1" checked="" class="md-checkbox">
Always
</label>
</div>
Toggle Button
Toggle button are pretty cool for on / off elements for example.
<div class="form-group togglebutton">
<label class="col-sm-3 control-label">Wi-Fi</label>
<label>
<input type="checkbox" checked="" class="col-sm-9 md-checkbox">
</label>
</div>
You can change color of toggle by adding a class to togglebutton element. Here is a list of class color that you can choose:
.togglebutton-material-red .togglebutton-material-pink .togglebutton-material-purple .togglebutton-material-deep-purple .togglebutton-material-indigo .togglebutton-material-blue .togglebutton-material-light-blue .togglebutton-material-cyan .togglebutton-material-teal .togglebutton-material-green .togglebutton-material-light-green .togglebutton-material-lime .togglebutton-material-yellow .togglebutton-material-amber .togglebutton-material-orange .togglebutton-material-deep-orange .togglebutton-material-brown .togglebutton-material-grey .togglebutton-material-blue-grey
Input text
If you want to have floating label, add floating-label to your input, like that
<input type="text" class="form-control floating-label" placeholder="label">
You think that new Material Design elements could be great? Don't hesitate to send us a message via our Themeforest Page or directly by email at support@themes-lab.com.