Part of material design for web
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
javascript
sass
.gitignore
Gruntfile.js
README.md
button.html
checkbox.html
form.html
index.html
package.json
radio.html
select.html
switch.html

README.md

material_design_for_web

Intro

Use CSS3 achieve a part of material design

Notice

Now scss support compass 1.0.1

Modify transform in scss

Demo

Demo

Feature

  • Base on JavaScript & Sass & compass
  • Use CSS3
  • Form input focus effect
  • button & a click effect

Support

  • IE 10+
  • jQuery is not necessary

Usage

Form

HTML

<!-- basic -->
<div class="input-group">
    <input type="text">
    <label class="material-design-label" for="">PassWord</label>
</div>

Can add error style

<!-- error style -->
<div class="input-group input-error">
    <input type="text">
    <label class="material-design-label" for="">E-mail</label>
</div>
<!-- password type -->
<div class="material-input-group">
    <input type="password">
    <label class="material-design-label" for="">PassWord</label>
</div>
<!-- textarea -->
<div class="material-input-group">
    <textarea rows="4" cols="50"></textarea>
    <label class="material-design-label" for="">textarea</label>
</div>

button

Default HTML tag button & a have material design effect

If want to change

Modify code

if (target.tagName.toLowerCase() !== 'button' && target.tagName.toLowerCase() !== 'a') return false;

checkbox

<div class="material-design-checkbox">
    <input id="checkbox" type="checkbox">
    <span class="check">
        <span class="ripple"></span>
    </span>
    <label for="checkbox">checkbox</label>
</div>

radio

<div class="material-design-radio">
    <input id="radio_2" type="radio" name="radio">
    <span class="check">
        <span class="ripple"></span>
    </span>
    <label for="radio_2">radio_2</label>
</div>

switch

<div class="material-design-switch">
    <label for="switch">switch</label>
    <input id="switch" type="checkbox">
    <span class="check">
        <span class="ripple"></span>
    </span>
</div>