Skip to content

Instantly share code, notes, and snippets.

@stephensmitchell

stephensmitchell/index.html

Created August 19, 2020 10:52
Show Gist options
  • Save stephensmitchell/68c28d2360d984613855905601f662fc to your computer and use it in GitHub Desktop.
Save stephensmitchell/68c28d2360d984613855905601f662fc to your computer and use it in GitHub Desktop.
Download ZIP
Material Design Lite components demo
Raw
index.html
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
style.css
body {
padding: 20px;
background: #fafafa;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment