Merge pull request #519 from stephenplusplus/closure

closure updated to use bower.

architecture-examples/closure/component.json

+{
+	"name": "todomvc-closure",
+	"version": "0.0.0",
+	"dependencies": {
+		"todomvc-common": "~0.1.2"
+	}
+}

architecture-examples/closure/components/todomvc-common/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: '✔';
+	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	word-break: break-word;
+	padding: 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
+}
+
+#clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+.hidden{
+	display:none;
+}

architecture-examples/closure/components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	if (location.hostname === 'todomvc.com') {
+		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+
+	function getSourcePath() {
+		// If accessed via addyosmani.github.com/todomvc/, strip the project
+		// path.
+		if (location.hostname.indexOf('github.com') > 0) {
+			return location.pathname.replace(/todomvc\//, '');
+		}
+		return location.pathname;
+	}
+
+	function appendSourceLink() {
+		var sourceLink = document.createElement('a');
+		var paragraph = document.createElement('p');
+		var footer = document.getElementById('info');
+		var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
+
+		if (footer) {
+			sourceLink.href = urlBase + getSourcePath();
+			sourceLink.appendChild(document.createTextNode('Check out the source'));
+			paragraph.appendChild(sourceLink);
+			footer.appendChild(paragraph);
+		}
+	}
+
+	function redirect() {
+		if (location.hostname === 'addyosmani.github.com') {
+			location.href = location.href.replace('addyosmani.github.com/todomvc',
+												  'todomvc.com');
+		}
+	}
+
+	appendSourceLink();
+	redirect();
+})();

architecture-examples/closure/css/todos.css

-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-weight: inherit;
-	font-style: inherit;
-	font-size: 100%;
-	font-family: inherit;
-	vertical-align: baseline;
-}
-body {
-	line-height: 1;
-	color: black;
-	background: white;
-}
-ol, ul {
-	list-style: none;
-}
-a img {
-	border: none;
-}
-
-html {
-	background: #eeeeee;
-}
-body {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 14px;
-	line-height: 1.4em;
-	background: #eeeeee;
-	color: #333333;
-}
-
-#todoapp {
-	width: 480px;
-	margin: 0 auto 40px;
-	background: white;
-	padding: 20px;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-  -moz-border-radius: 0 0 5px 5px;
-  -o-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-}
-#todoapp h1 {
-	font-size: 36px;
-	font-weight: bold;
-	text-align: center;
-	padding: 20px 0 30px 0;
-	line-height: 1;
-}
-
-#create-todo {
-	position: relative;
-}
-#create-todo input {
-	width: 466px;
-	font-size: 24px;
-	font-family: inherit;
-	line-height: 1.4em;
-	border: 0;
-	outline: none;
-	padding: 6px;
-	border: 1px solid #999999;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-#create-todo input::-webkit-input-placeholder {
-	font-style: italic;
-}
-#create-todo span {
-	position: absolute;
-	z-index: 999;
-	width: 170px;
-	left: 50%;
-	margin-left: -85px;
-}
-
-#todo-list {
-	margin-top: 10px;
-}
-#todo-list li {
-	padding: 12px 20px 11px 0;
-	position: relative;
-	font-size: 24px;
-	line-height: 1.1em;
-	border-bottom: 1px solid #cccccc;
-}
-#todo-list li:after {
-	content: "\0020";
-	display: block;
-	height: 0;
-	clear: both;
-	overflow: hidden;
-	visibility: hidden;
-}
-#todo-list li.editing {
-	padding: 0;
-	border-bottom: 0;
-}
-#todo-list .editing .display,
-#todo-list .edit {
-	display: none;
-}
-#todo-list .editing .edit {
-	display: block;
-}
-#todo-list .editing input {
-	width: 444px;
-	font-size: 24px;
-	font-family: inherit;
-	margin: 0;
-	line-height: 1.6em;
-	border: 0;
-	outline: none;
-	padding: 10px 7px 0px 27px;
-	border: 1px solid #999999;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-#todo-list .check {
-	position: relative;
-	top: 9px;
-	margin: 0 10px 0 7px;
-	float: left;
-}
-#todo-list .done .todo-content {
-	text-decoration: line-through;
-	color: #777777;
-}
-#todo-list .todo-destroy {
-	position: absolute;
-	right: 5px;
-	top: 14px;
-	display: none;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	background: url(destroy.png) no-repeat 0 0;
-}
-#todo-list li:hover .todo-destroy {
-	display: block;
-}
-#todo-list .todo-destroy:hover {
-	background-position: 0 -20px;
-}
-
-#todo-stats {
-	*zoom: 1;
-	margin-top: 10px;
-	color: #777777;
-}
-#todo-stats:after {
-	content: "\0020";
-	display: block;
-	height: 0;
-	clear: both;
-	overflow: hidden;
-	visibility: hidden;
-}
-#todo-stats .todo-count {
-	float: left;
-}
-#todo-stats .todo-count .number {
-	font-weight: bold;
-	color: #333333;
-}
-#todo-stats .todo-clear {
-	float: right;
-}
-#todo-stats .todo-clear a {
-	color: #777777;
-	font-size: 12px;
-}
-/* these two rules are overridden below. find ".todo-clear a" */
-#todo-stats .todo-clear a:visited {
-	color: #777777;
-}
-#todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
-	color: #336699;
-}
-
-#instructions {
-	width: 520px;
-	margin: 10px auto;
-	color: #777777;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-#instructions a {
-	color: #336699;
-}
-
-#credits {
-	width: 520px;
-	margin: 30px auto;
-	color: #999;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-#credits a {
-	color: #888;
-}
-
-
-/*
-*  François 'cahnory' Germain
-*/
-.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
-	color:#ffffff;
-	cursor:normal;
-	display:-moz-inline-stack;
-	display:inline-block;
-	font-size:12px;
-	font-family:arial;
-	padding:.5em 1em;
-	position:relative;
-	text-align:center;
-	text-shadow:0 -1px 1px #111111;
-	-webkit-border-top-left-radius:4px ;
-	-webkit-border-top-right-radius:4px ;
-	-webkit-border-bottom-right-radius:4px ;
-	-webkit-border-bottom-left-radius:4px ;
-	-khtml-border-top-left-radius:4px ;
-	-khtml-border-top-right-radius:4px ;
-	-khtml-border-bottom-right-radius:4px ;
-	-khtml-border-bottom-left-radius:4px ;
-	-moz-border-radius-topleft:4px ;
-	-moz-border-radius-topright:4px ;
-	-moz-border-radius-bottomright:4px ;
-	-moz-border-radius-bottomleft:4px ;
-	border-top-left-radius:4px ;
-	border-top-right-radius:4px ;
-	border-bottom-right-radius:4px ;
-	border-bottom-left-radius:4px ;
-	-o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-	-moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-	-khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-	-webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-	box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-	background-color:#3b3b3b;
-	background-image:-moz-linear-gradient(top,#555555,#222222);
-	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-}
-.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
-	content:"\25B8";
-	display:block;
-	font-size:2em;
-	height:0;
-	line-height:0;
-	position:absolute;
-}
-.ui-tooltip:after, .ui-tooltip-bottom:after {
-	color:#2a2a2a;
-	bottom:0;
-	left:1px;
-	text-align:center;
-	text-shadow:1px 0 2px #000000;
-	-o-transform:rotate(90deg);
-	-moz-transform:rotate(90deg);
-	-khtml-transform:rotate(90deg);
-	-webkit-transform:rotate(90deg);
-	width:100%;
-}
-.ui-tooltip-top:after {
-	bottom:auto;
-	color:#4f4f4f;
-	left:-2px;
-	top:0;
-	text-align:center;
-	text-shadow:none;
-	-o-transform:rotate(-90deg);
-	-moz-transform:rotate(-90deg);
-	-khtml-transform:rotate(-90deg);
-	-webkit-transform:rotate(-90deg);
-	width:100%;
-}
-.ui-tooltip-right:after {
-	color:#222222;
-	right:-0.375em;
-	top:50%;
-	margin-top:-.05em;
-	text-shadow:0 1px 2px #000000;
-	-o-transform:rotate(0);
-	-moz-transform:rotate(0);
-	-khtml-transform:rotate(0);
-	-webkit-transform:rotate(0);
-}
-.ui-tooltip-left:after {
-	color:#222222;
-	left:-0.375em;
-	top:50%;
-	margin-top:.1em;
-	text-shadow:0 -1px 2px #000000;
-	-o-transform:rotate(180deg);
-	-moz-transform:rotate(180deg);
-	-khtml-transform:rotate(180deg);
-	-webkit-transform:rotate(180deg);
-}
-
-/* new additions - cleanup required*/
-
-
-/* line 109 */
-#todoapp #todo-stats {
-	*zoom: 1;
-	margin-top: 10px;
-	color: #555555;
-	-moz-border-radius-bottomleft: 5px;
-	-webkit-border-bottom-left-radius: 5px;
-	-o-border-bottom-left-radius: 5px;
-	-ms-border-bottom-left-radius: 5px;
-	-khtml-border-bottom-left-radius: 5px;
-	border-bottom-left-radius: 5px;
-	-moz-border-radius-bottomright: 5px;
-	-webkit-border-bottom-right-radius: 5px;
-	-o-border-bottom-right-radius: 5px;
-	-ms-border-bottom-right-radius: 5px;
-	-khtml-border-bottom-right-radius: 5px;
-	border-bottom-right-radius: 5px;
-	background: #f4fce8;
-	border-top: 1px solid #ededed;
-	padding: 0 20px;
-	line-height: 36px;
-}
-/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-#todoapp #todo-stats:after {
-	content: "\0020";
-	display: block;
-	height: 0;
-	clear: both;
-	overflow: hidden;
-	visibility: hidden;
-}
-/* line 118 */
-#todoapp #todo-stats .todo-count {
-	float: left;
-}
-/* line 120 */
-#todoapp #todo-stats .todo-count .number {
-	font-weight: bold;
-	color: #555555;
-}
-/* line 123 */
-#todoapp #todo-stats .todo-clear {
-	float: right;
-}
-/* line 125 */
-#todoapp #todo-stats .todo-clear a {
-	display: block;
-	line-height: 20px;
-	text-decoration: none;
-	-moz-border-radius: 12px;
-	-webkit-border-radius: 12px;
-	-o-border-radius: 12px;
-	-ms-border-radius: 12px;
-	-khtml-border-radius: 12px;
-	border-radius: 12px;
-	background: rgba(0, 0, 0, 0.1);
-	color: #555555;
-	font-size: 11px;
-	margin-top: 8px;
-	padding: 0 10px 1px;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-}
-/* line 136 */
-#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
-	background: rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-/* line 139 */
-#todoapp #todo-stats .todo-clear a:active {
-	position: relative;
-	top: 1px;
-}
-

architecture-examples/closure/index.html

@@ -4,10 +4,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<title>Closure • TodoMVC</title>
-	<link rel="stylesheet" href="../../assets/base.css">
-	<!--[if IE]>
-	<script src="../../assets/ie.js"></script>
-	<![endif]-->
+	<link rel="stylesheet" href="components/todomvc-common/base.css">
 </head>
 <body>
 	<section id="todoapp">
@@ -40,7 +37,7 @@
 		<p>Created by <a href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
-	<script src="../../assets/base.js"></script>
+	<script src="components/todomvc-common/base.js"></script>
 	<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > js/compiled.js) -->
 	<script type="text/javascript" src="js/compiled.js"></script>
 	<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->