Lightweight MD tables

demo/demo-menu.html

@@ -74,7 +74,7 @@
 	</style>
 	<template>
 		<paper-drawer-panel>
-			<div id="drawer" drawer>
+			<paper-header-panel id="drawer" drawer>
 				<paper-toolbar>
 					<div class="title" style="">
 						&lt;paper-datatable&gt;
@@ -140,6 +140,9 @@
 							<paper-item data-url="paper-datatable-card.html" data-keywords='["editable", "demo", "card", "pagination", "datasource", "data-source", "data source"]'>
 								<iron-icon icon="build"></iron-icon><span><code>&lt;datatable-card&gt;</code> element</span>
 							</paper-item>
+							<paper-item data-url="icons.html" data-keywords='["table", "css", "light", "lightweight"]'>
+								<iron-icon icon="build"></iron-icon><span>CSS only MD <span><code>&lt;table&gt;</code></span>
+							</paper-item>
 							<paper-item data-url="icons.html" data-keywords='["icons"]'>
 								<iron-icon icon="build"></iron-icon><span>Icons</span>
 							</paper-item>
@@ -157,7 +160,7 @@
 					</paper-item>
 				</paper-menu>
 				<div id="noresults">Sorry, no results</div>
-			</div>
+			</paper-header-panel>
 			<!--
 			<div main>
 				<div id="content">

demo/light.html

@@ -25,8 +25,16 @@
 
 			paper-card{
 				display:block;
+				max-width: 800px;
+				margin: auto;
+				padding: 20px;
 			}
 
+			table{
+				max-width: 800px;
+				margin: auto;
+				margin-bottom: 20px;
+			}
 		</style>
 
 	</head>
@@ -53,6 +61,15 @@
 						</tr>
 					</tbody>
 				</table>
+
+				<paper-card>
+					The above is a simple <code>&lt;table&gt;</code> element after including
+					<code>paper-datable-styles</code> using:
+
+					<pre style="margin-left:20px;"><code>&lt;style is="custom-style" include="paper-datatable-styles"&gt;&lt;/style&gt;</code></pre>
+
+					with <code>class="card"</code> added for a simple MD card design.
+				</paper-card>
 			</demo-menu>