Relative Sprout

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sprizzout, yo.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="mobile-web-app-capable" content="yes">
        <script src="//use.typekit.net/exf4iwe.js"></script>
		<script>try{Typekit.load();}catch(e){}</script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mcustomscrollbar.concat.min.js"></script>
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mCustomScrollbar.min.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js"></script>
		<script>
			$.get('sprout.scss').done(function (sass) {
				var css = Sass.compile(sass);
				$('<style>').html(css).appendTo('head');
			});
		</script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react-with-addons.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/jsxtransformer.js"></script>
		<script type="text/jsx">
/** @jsx React.DOM */

var dispatch = _.extend({}, Backbone.Events),
	local = JSON.parse(localStorage.getItem('sprout')),
	Model = Backbone.Model.extend({
		defaults: {
			page: null
		}
	}),
	model;

if (local) {
	model = new Model(local);
} else {
	model = new Model();
}

var Transition = React.addons.CSSTransitionGroup;

var App = React.createClass({

getInitialState: function() {
		return _.extend({}, model.toJSON());
	},

componentWillMount: function () {
		var component = this;
		model.on('change', function (model) {
			var json = model.toJSON();
			component.setState(json);
			localStorage.setItem('sprout', JSON.stringify(json));
			// console.log('App:componentWillMount', json);
		});
	},

componentDidMount: function () {
		$('.sprout-body, .sprout-east-wrap, .sprout-west-wrap')
			.mCustomScrollbar({
				theme: 'minimal-dark',
				scrollInertia: 200
			});
	},

render: function () {
		console.log('App:render', this.state);
		return (
<div className={this.getClasses()}>
	<div className="sprout-body" role="main">
		<div className="sprout-body-center">
			{this.getPage()}
		</div>
	</div>
	<div className="sprout-east" role="complementary">
		<div className="sprout-east-center">
			<div className="sprout-east-offset">
				<div className="sprout-east-wrap">
					<div className="dev-stub">Page-specific sidebar</div>
				</div>
			</div>
		</div>
	</div>
	<div className="sprout-west" role="complementary">
		<div className="sprout-west-center">
			<div className="sprout-west-offset">
				<div className="sprout-west-wrap">
					<div className="sprout-west-body">
						<div className="dev-stub">
							No position:fixed
							Custom scrollbars
						</div>
					</div>
					<div className="sprout-west-foot"></div>
				</div>
			</div>
		</div>
	</div>
	<div className="sprout-north" role="banner">
		<div className="sprout-north-center">

</div>
	</div>
</div>
		);
	},

getClasses: function () {
		var classes = React.addons.classSet({
			'sprout': true,
			'standalone': window.navigator.standalone
		});
		return classes;
	},

getPage: function () {
		switch (this.state.page) {
			default:
				return <Front {...this.state} />;
		}
	}
});

var Front = React.createClass({

render: function () {
		return (
<div className={this.getClasses()}>
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
	<div className="dev-message-stub" />
</div>
		);
	},

getClasses: function () {
		var classes = React.addons.classSet({
			'sprout-front': true
		});
		return classes;
	}
});

$(function () {
	window.React = React;
	window.dispatch = dispatch;
	window.model = model;
	React.initializeTouchEvents(true);
	React.render(<App />, document.body);
});
		</script>
	</head>
	<body>
	</body>
</html>

Updated missing url //cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mCustomScrollbar.concat.min.js to //cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mcustomscrollbar.concat.min.js

Updated missing url //cdnjs.cloudflare.com/ajax/libs/react/0.12.1/JSXTransformer.js to //cdnjs.cloudflare.com/ajax/libs/react/0.12.1/jsxtransformer.js

https://use.typekit.net/exf4iwe.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.6/jquery.mCustomScrollbar.concat.min.js

https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react-with-addons.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/JSXTransformer.js