MDL (Material Design Library) Google

http://www.getmdl.io/

구글이 공식적으로 운영하는 Material Design UI 프레임워크이다.
누구든 손쉽게 Material Design 웹(웹앱)을 만들 수 있도록 지원을 하고 있다.

Material Design은 2015년 안드로이드 롤리팝(5.1)과 함께 구글이 소개한 디자인 언어이다.
개발자에게 "언어"라는 용어가 오해를 일으킬 소지가 있는데.... 
Material Design을 정확하게 이해하는데 가장 좋은 글(프리젠테이션)을 참고하면 좋을 듯...

http://www.slideshare.net/watchncompass/3-material-design

다음과 같이 세련된 Material Design을 손쉽게 만들 수 있다.

1. 초기 설정

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

2. 컴퍼넌트

account_box

account_box

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>

3. 카드 UI

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

Get Started

<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
</style>

<div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>