Skip to content

Instantly share code, notes, and snippets.

@Rovel

Rovel/Material Design Template.markdown

Created July 13, 2016 03:20
Show Gist options
  • Save Rovel/cdb55a5083b17be16c39878285f19a71 to your computer and use it in GitHub Desktop.
Save Rovel/cdb55a5083b17be16c39878285f19a71 to your computer and use it in GitHub Desktop.
Download ZIP
Material Design Template
Raw
index.html
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a transparent header that draws on top of the layout's background -->
<div class="layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">About</a>
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
</nav>
</div>
</header>
<div class="mdl-layout__drawer" id="drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#" id="clickme">Click me</a>
<a class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="#">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col"><!-- Wide card with share menu button -->
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome
</h2>
<!-- Textfield with Floating Label -->
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">email</label>
</div>
</form>
</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>
</div>
</div>
</main>
</div>
</body>
</html>
Raw
Material Design Template.markdown
Raw
script.js
var clicker = document.getElementById("clickme");
clicker.onclick = function() {
document.getElementById("drawer").className = "mdl-layout__drawer"; // only keep mdl-layout__drawer, is-visible should be removed
}
Raw
style.css
.demo-card-wide.mdl-card {
width: 99%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 250px;
background: url('https://getmdl.io/assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
.layout-transparent {
background: url('http://www.getmdl.io/assets/demos/transparent.jpg') center / cover;
}
.layout-transparent .mdl-layout__header,
.layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment