Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 30, 2017 02:11
Show Gist options
  • Save anonymous/cc25c853542ada83a8f2e5570e9d7810 to your computer and use it in GitHub Desktop.
Save anonymous/cc25c853542ada83a8f2e5570e9d7810 to your computer and use it in GitHub Desktop.
Download ZIP
MDL getting started
Raw
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout">
<main class="mdl-layout__content">
<div class="container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<h1 class="mdl-typography--display-4">Welcome</h1>
<h2 class=""> Material Design Light: MDL</h2>
<h3><a href="https://getmdl.io/started/index.html">getting started</a></h3>
<p>Include the Material Lite CSS and JavaScript files in each HTML page in your project. We recommend that you use the files hosted on our CDN. You can also customize and download them to host them yourself, build them from our source code or install
them in your npm/Bower project.
<br>
<br>
<pre><code>&lt;!-- Accent-colored raised button with ripple --&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"&gt;
Button
&lt;/button&gt;
&lt;!-- Colored FAB button --&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"&gt;
&lt;i class="material-icons"&gt;add&lt;/i&gt;
&lt;/button&gt;
</code></pre>
<!-- 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>
<br><br>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
<hr> Remember to include the meta viewport tag in your document so mobile devices will render correctly.
<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
</code></pre>
<p>
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here
is how you can dynamically create the same raised button with ripples shown in the section above:
</p>
<pre><code>&lt;div id="container"/&gt;
&lt;script&gt;
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
&lt;/script&gt;
</code></pre>
</main>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer>
var button = document.createElement("button");
var textNode = document.createTextNode("Click Me!");
button.appendChild(textNode);
button.className = "mdl-button mdl-js-button mdl-js-ripple-effect";
componentHandler.upgradeElement(button);
document.getElementById("container").appendChild(button);
</script>
</div>
Raw
script.js
function init (componentHandler) {
}
Raw
style.css
.container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.content {
padding: 33px 56px;
margin-bottom: 80px;
box-sizing: border-box;
}
body {
background: #efefef;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment