Bands.

Everything we listened to in high school.

Changelog

Nevermind.
Add basic front-end markup, styles + scripts.

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Bands.</title>
	<style>
@import url(//fonts.googleapis.com/css?family=Lato:300,400,900);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

body {
	color: #abc;
	font: 100% Lato, Helvetica, Arial, sans-serif;
	margin: 0 auto;
	padding: 50px;
	text-align: center;
}

h1 { color: #456; }

ul {
	list-style-type: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

.band {
	width: 280px;
	border-top: 1px solid #ddd;
	display: inline-block;
	padding: 20px;
	text-align: left;
	vertical-align: top;

&-name {
		color: #456;
		font-size: 125%;
		font-weight: normal;
		margin: 0;
	}
}
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
	<script>
		// this allows the styles above to retain css code coloring in a
		// text editor instead of having everything in this script tag
		var head = document.getElementsByTagName('head')[0],
		style = document.getElementsByTagName('style')[0],
		css = Sass.compile(style.innerHTML);
		head.removeChild(style);
		document.write("<style>"+ css +"</style>");
	</script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
	<script>
		var BandsCollection = Backbone.Collection.extend({
			url: "https://gist.githubusercontent.com/mattborn/6351a34d29250ecd4519/raw/bands.json",
			parse: function (r) {
				return r.bands;
			}
		});

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

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

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

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