mailtruck/index.html

## 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>

## mdl-getting-started.markdown

      
    Raw
  

              mdl-getting-started.markdown
            
          
    MDL getting started

A Pen by Brian Danowski on CodePen.
License.

  
## script.js
function init (componentHandler) {

}

## 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;
}
	<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><!-- 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>
	</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><meta name="viewport" content="width=device-width, initial-scale=1.0">
	</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><div id="container"/>
	<script>
	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>
	</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>
	.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;
	}