Skip to content

Instantly share code, notes, and snippets.

@saifazmi

saifazmi/MDL_Basic-Template.html

Created March 15, 2017 11:10
Show Gist options
  • Save saifazmi/034719c3b11acbaf7a8c25b0ac07a40a to your computer and use it in GitHub Desktop.
Save saifazmi/034719c3b11acbaf7a8c25b0ac07a40a to your computer and use it in GitHub Desktop.
Download ZIP
Snippet: MDL basic layout starting template
Raw
MDL_Basic-Template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<title>__Hello_Web__</title>
<!-- @NOTE: External Stylesheets here (as needed) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- @TODO: Replace this stylesheet with the final color palette -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<!-- @NOTE: Stuff goes here -->
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
<a class="mdl-navigation__link" href="#">Nav link 2</a>
<a class="mdl-navigation__link" href="#">Nav link 3</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Simple Layout</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
<a class="mdl-navigation__link" href="#">Nav link 2</a>
<a class="mdl-navigation__link" href="#">Nav link 3</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- @TODO: Replace this card with suitable content -->
<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>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
Mini-footer Heading
</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
<button class="mdl-mini-footer__social-btn"></button>
</div>
</footer>
</div>
<!-- @NOTE: SCRIPTs go here -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment