MDL Starter

by Jason Miller

HTML

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;.css">
<script src="https://npmcdn.com/preact"></script>
<script src="https://npmcdn.com/preact-mdl"></script>
<script src="https://npmcdn.com/preact-router"></script>

SCSS

html, body {
    background: #E0E4E9;
}

#app header {
	background: #EEE;
	* {color: #555;}
	a {
		margin-left: -20px;
		text-decoration: none;
	}
}

#fab {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999;
}

#app {
    position: static;
    overflow: visible;
}

.mdl-card {
    display: block;
    text-align: left;
    margin: 20px;
    padding: 0 0 10px;
    width: auto;
}

.mdl-card__title.graphic {
    height: 100px;
    background: url(https://lh3.googleusercontent.com/-WiwrPHajH08/VTpzIfl09SI/AAAAAAAA4S4/062nOW9T-I4/s630-fcrop64=1,00002f44ffffc017/material-design-wallpaper-1.png) center/cover;
    .mdl-card__title-text {
        color: #FFF;
        font-size: 300%;
        text-shadow: 0 0 1px #000, 0 0 5px rgba(0,0,0,0.3);
    }
}

.mdl-card__supporting-text,
.mdl-card__supporting-text > p {
    font-size: 16px;
}

Babel + JSX

const { h, render, Component } = preact; /** @jsx h */
const { Router } = preactRouter;
const { Layout, Navigation, Card, Button, Icon, TextField } = preactMdl;


// jsfiddle hack to remove url:
history.replaceState(null,null,'/');


// Our top-level component.
class App extends Component {
	handleFab = () => {
		alert('You clicked New!');
	};

	render() {
		return (
			<div id="app">
				<Layout fixed-header fixed-drawer>
					<Header />
					<Sidebar />

					<Button id="fab" fab colored onClick={this.handleFab}>
						<Icon icon="create" />
					</Button>

					<Layout.Content>
						<Router>
							<Home path="/" default />
							<Profile path="/profile" id="me" />
							<Profile path="/profile/:id" />
						</Router>
					</Layout.Content>
				</Layout>
			</div>
		);
	}
}


const Header = ({ onSearch }) => (
	<Layout.Header>
		<Layout.HeaderRow>
			<Layout.Title>
				<a href="/">Example</a>
			</Layout.Title>
			<Layout.Spacer />
			<TextField
				placeholder="Search"
				type="search"
				onSearch={onSearch}
				style="background-color:#FFF; color:#000; padding:10px;"
			/>
		</Layout.HeaderRow>
	</Layout.Header>
);


class Sidebar extends Component {
	shouldComponentUpdate() {
		return false;
	}

	hide = () => {
		this.base.classList.remove('is-visible');
	};

	render() {
		return (
			<Layout.Drawer onClick={this.hide}>
				<Layout.Title>Example App</Layout.Title>
				<Navigation>
					<Navigation.Link href="/">Home</Navigation.Link>
					<Navigation.Link href="/profile">Profile</Navigation.Link>
					<Navigation.Link href="/profile/john">John</Navigation.Link>
				</Navigation>
			</Layout.Drawer>
		);
	}
}


class Home extends Component {
	shouldComponentUpdate() {
		return false;
	}

	render() {
		return (
			<Card shadow="4">
				<Card.Title class="graphic">
					<Card.TitleText>Home</Card.TitleText>
				</Card.Title>
				<Card.Text style="text-align:center">
					<Icon icon="person" style="display:block; font-size:100px;" />
					<p>Nothing to see...