Bugle Diary: materialdesign

ラベル materialdesign の投稿を表示しています。すべての投稿を表示

2017/03/21

[css][Material Design]UI Kit PSD Material UI Kit

PHPSPOTで紹介されていた
マテリアルデザインのUI Kit PSD「Material UI Kit」
の
Material UI Kit
ってすごくいかしているんだけど商業利用可能なのかー？

2016/06/21

[css][materialdesign][html5][jQuery]window scrollが発火しない件

material design liteを使って下のようなプログラムを実装しました。

$(window).on('scroll',function(){
 
});

なぜか上の処理が動かない。

stackoverflowの
Material design and jQuery, scroll not working
でも同じような投稿があり、結果的には、下のようにしたら動きました。

$('.mdl-layout__content').on('scroll',function(){
 
});

2016/06/20

[css][materialdesign][html5]dialog plugin

昨日のエントリーでmaterial design liteでdialogを使うには自前で実装する必要があるっぽく、ぐぐってみたら、プラグインがありました。

jQuery Modal Dialog Plugin For Material Design Lite

導入方法は超簡単で、

<link rel="stylesheet" href="./mdl-jquery-modal-dialog.css">
<script src="./mdl-jquery-modal-dialog.js"></script>

を入れた後に、

showDialog({
  title: 'Title',
  text: 'Text to show'
});

と呼び出せばおｋ

2016/06/19

[css][materialdesign][html5]dialogについて

material design liteでdialogを使いたくて調査していたら、なんと、dialogタグを推奨か、自前で実装してほしいと書いてあった。

しかも、dialogタグはchromeしかサポートしておらずwww

mobile safariでもサポートしてくれないかなー。

2016/05/27

[CSS][Material Design Lite][Material Design Gallery]Simple Signup Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.signup {
  width: 100%;
  margin-top: 20px;
}

.mdl-textfield {
  width: 100%;
}

.p-10{
  padding: 0 10px 10px 10px;
}

.b-r-2{
  border-radius:2px;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <main class="mdl-layout__content">
    <div class="mdl-grid ">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white p-10 b-r-2">
        <h4>アカウント作成</h4>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="username" name="username" value="">
            <label class="mdl-textfield__label" for="username">ユーザー名</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect signup">アカウント作成</button>
        </form>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
</body>
</html>

2016/05/25

[CSS][Material Design Lite][Material Design Gallery]Simple Login Page Part 2

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.login {
  width: 100%;
  margin-top: 20px;
}

.mdl-textfield {
  width: 100%;
}

.p-10{
  padding: 0 10px 10px 10px;
}

.b-r-2{
  border-radius:2px;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <main class="mdl-layout__content">
    <div class="mdl-grid ">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white p-10 b-r-2">
        <h4>サービス名にログイン</h4>
        <p class="mdl-color-text--red-A700">メールアドレスとパスワードが<br>一致していません。</p>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect login">ログイン</button>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <a href="#">またはアカウント新規登録</a>
          </div>
        </form>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
</body>
</html>

2016/05/24

[CSS][Material Design Lite][Material Design Gallery]Simple Login Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<style>
.login {
  width: 100%;
  margin-top: 20px;
}
.mdl-layout-title {
  margin:0 auto;
}
.mdl-textfield {
  width: 100%;
}
</style>
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="mdl-grid mdl-color--white">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col">
        <p class="mdl-color-text--red-A700">メールアドレスとパスワードが<br>一致していません。</p>
        <form action="" method="POST">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email" value="">
            <label class="mdl-textfield__label" for="email">メールアドレス</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="password" id="password" name="password">
            <label class="mdl-textfield__label" for="password">パスワード</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect login">ログイン</button>
        </form>
      </div>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/23

[CSS][Material Design Lite][Material Design Gallery]SubTitle List Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        <ul class="mdl-list">
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>hoge</span>
              <span class="mdl-list__item-sub-title">hoge's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>foo</span>
              <span class="mdl-list__item-sub-title">foo's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
          <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
              <span>bar</span>
              <span class="mdl-list__item-sub-title">bar's sub title</span>
            </span>
            <span class="mdl-list__item-secondary-content">
              <i class="material-icons"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/22

[CSS][Material Design Lite][Material Design Gallery]Simple List Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        <ul class="mdl-list">
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              hoge
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              foo
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              bar
            </span>
          </li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/21

[CSS][Material Design Lite][Material Design Gallery]Single Page

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Material Design</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class="mdl-color--grey-50">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title"></span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"></span>
    <nav class="mdl-navigation">
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--8-col mdl-color--white">
        Hello Material Design Recipe 1
      </div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
    </div>
  </main>
</div>
<script>
</script>
</body>
</html>

2016/05/20

[CSS][Material Design Lite]material-design-galleryプロジェクト作成

Material Design Liteを使ったCSSとHTMLにはまっていて、それをまとめた場所がほしいなと思い、githubに
material-design-gallery
という形で作ってみました。

不定期ですが、作ったコーディングソースをアップしていこうかなと。

登録: 投稿 (Atom)

Bugle Diary