From aa34ecd261ac78d5248887ef5f372dd85e269c39 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 11:42:08 -0400
Subject: [PATCH 01/11] add note styling and controls

---
 src/fabricator/scripts/fabricator.js          | 19 ++++++++++---------
 src/fabricator/styles/partials/_code.scss     | 18 ++++++++++++++++--
 src/fabricator/styles/partials/_controls.scss |  9 +++++----
 src/fabricator/styles/partials/_icons.scss    |  3 ++-
 src/fabricator/styles/partials/_item.scss     |  5 +++++
 src/toolkit/views/partials/intro.html         |  1 -
 src/toolkit/views/partials/outro.html         |  1 -
 7 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/fabricator/scripts/fabricator.js b/src/fabricator/scripts/fabricator.js
index d95c126f..68b015ef 100644
--- a/src/fabricator/scripts/fabricator.js
+++ b/src/fabricator/scripts/fabricator.js
@@ -14,6 +14,7 @@ var fabricator = window.fabricator = {};
 fabricator.options = {
 	toggles: {
 		details: true,
+		notes: true,
 		code: false
 	}
 };
@@ -183,15 +184,14 @@ fabricator.allItemsToggles = function () {
 
 	var items = {
 		details: document.querySelectorAll("[data-toggle=\"details\"]"),
+		notes: document.querySelectorAll("[data-toggle=\"notes\"]"),
 		code: document.querySelectorAll("[data-toggle=\"code\"]")
 	};
 
 	var toggleAllControls = document.querySelectorAll(".f-controls [data-toggle-control]");
 
-
 	var options = (fabricator.test.localStorage) ? JSON.parse(localStorage.fabricator) : fabricator.options;
 
-
 	// toggle all
 	var toggleAllItems = function (type, value) {
 
@@ -222,9 +222,9 @@ fabricator.allItemsToggles = function () {
 
 	};
 
-	for (var ii = 0; ii < toggleAllControls.length; ii++) {
+	for (var i = 0; i < toggleAllControls.length; i++) {
 
-		toggleAllControls[ii].addEventListener("click", function (e) {
+		toggleAllControls[i].addEventListener("click", function (e) {
 
 			// extract info from target node
 			var type = e.target.getAttribute("data-toggle-control"),
@@ -251,16 +251,17 @@ fabricator.allItemsToggles = function () {
 /**
  * Handler for single item code toggling
  */
-fabricator.singleItemCodeToggle = function () {
+fabricator.singleItemToggle = function () {
 
 	var itemToggleSingle = document.querySelectorAll(".f-toggle");
 
 	// toggle single
-	var toggleSingleItemCode = function () {
+	var toggleSingleItemCode = function (e) {
 		var group = this.parentNode.parentNode.parentNode,
-			toggle = this.attributes["data-toggle-control"].value;
+			toggle = this.attributes["data-toggle-control"].value,
+			type = e.target.getAttribute("data-toggle-control");
 
-		group.querySelector("[data-toggle=\"code\"]").classList.toggle("f-item-hidden");
+		group.querySelector("[data-toggle=" + type + "]").classList.toggle("f-item-hidden");
 	};
 
 	for (var i = 0; i < itemToggleSingle.length; i++) {
@@ -281,7 +282,7 @@ fabricator.singleItemCodeToggle = function () {
 	fabricator
 		.primaryMenuControls()
 		.allItemsToggles()
-		.singleItemCodeToggle()
+		.singleItemToggle()
 		.buildColorChips()
 		.setActiveItem();
 
diff --git a/src/fabricator/styles/partials/_code.scss b/src/fabricator/styles/partials/_code.scss
index 30cbc178..770e6fff 100644
--- a/src/fabricator/styles/partials/_code.scss
+++ b/src/fabricator/styles/partials/_code.scss
@@ -3,6 +3,7 @@
  * @author Luke Askew
  */
 
+code,
 code[class*="language-"],
 pre[class*="language-"] {
 	color: #1b1e20;
@@ -15,16 +16,29 @@ pre[class*="language-"] {
 	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 	line-height: 18px;
 	direction: ltr;
-	max-height: 30em;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
 	overflow: auto;
-	margin: .5em 0;
+	margin: 1em 0;
 	padding: 1em;
+	border-radius: 3px;
 }
 
+p code {
+	margin: 0;
+	border-radius: 3px;
+	padding-bottom: 2px;
+	border: 1px solid darken($color--light, 7.3%);
+	&:before,
+	&:after {
+		letter-spacing: -0.2em;
+		content: "\00a0";
+	}
+}
+
+code,
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
 	background: $color--light;
diff --git a/src/fabricator/styles/partials/_controls.scss b/src/fabricator/styles/partials/_controls.scss
index 91640532..0e43f9cd 100644
--- a/src/fabricator/styles/partials/_controls.scss
+++ b/src/fabricator/styles/partials/_controls.scss
@@ -2,17 +2,18 @@
 	@include clearfix;
 	div {
 		box-sizing: border-box;
-		width: 50%;
-		padding: 1em 0;
+		width: 33%;
+		padding: 0.75em 0;
 		text-align: center;
 		float: left;
 		cursor: pointer;
 		color: $color--menu-heading-text;
+		border-right: $color--menu-heading-border 1px solid;
 		&:hover:not(.f-active) {
 			color: $color--menu-item-text;
 		}
-		&:first-child {
-			border-right: $color--menu-heading-border 1px solid;
+		&:last-child {
+			border-right: none;
 		}
 	}
 	.f-active {
diff --git a/src/fabricator/styles/partials/_icons.scss b/src/fabricator/styles/partials/_icons.scss
index 0ebfeaea..5aae5831 100644
--- a/src/fabricator/styles/partials/_icons.scss
+++ b/src/fabricator/styles/partials/_icons.scss
@@ -38,8 +38,9 @@
 
 .f-icon-notes:before {
 	content: "\61";
+	font-size: 0.85em;
 }
 
 .f-icon-details:before {
 	content: "\66";
-}
\ No newline at end of file
+}
diff --git a/src/fabricator/styles/partials/_item.scss b/src/fabricator/styles/partials/_item.scss
index 43743755..055557b9 100644
--- a/src/fabricator/styles/partials/_item.scss
+++ b/src/fabricator/styles/partials/_item.scss
@@ -28,3 +28,8 @@
 .f-item-hidden {
 	display: none;
 }
+
+.f-item-notes {
+	font-size: 0.875em;
+	color: darken($color--medium, 13%);
+}
diff --git a/src/toolkit/views/partials/intro.html b/src/toolkit/views/partials/intro.html
index 1bb5caad..48ba4681 100644
--- a/src/toolkit/views/partials/intro.html
+++ b/src/toolkit/views/partials/intro.html
@@ -11,7 +11,6 @@
 	<link rel="stylesheet" href="{{pathBase}}fabricator/styles/f.css">
 	<!-- /fabricator styles -->{{/if}}
 
-
 	<!-- toolkit styles -->
 	<link rel="stylesheet" href="{{pathBase}}toolkit/styles/toolkit.css">
 	<!-- /toolkit styles -->
diff --git a/src/toolkit/views/partials/outro.html b/src/toolkit/views/partials/outro.html
index d9e65240..d7e27945 100644
--- a/src/toolkit/views/partials/outro.html
+++ b/src/toolkit/views/partials/outro.html
@@ -3,7 +3,6 @@
 	<script src="{{pathBase}}fabricator/scripts/f.js"></script>
 	<!-- /fabricator scripts -->{{/if}}
 
-
 	<!-- toolkit scripts -->
 	<script src="{{pathBase}}toolkit/scripts/toolkit.js"></script>
 	<!-- /toolkit scripts -->

From 4d18fe8699d351d77a305619e46713ae92c94992 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 11:49:11 -0400
Subject: [PATCH 02/11] update dependencies

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8941539b..9ed833bf 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "change-case": "~1.0.6",
     "js-beautify": "~1.4.2",
     "mkpath": "~0.1.0",
-    "gulp-util": "~2.2.19",
+    "gulp-util": "~2.2.20",
     "gulp-uglify": "~0.2.1",
     "gulp-jshint": "~1.3.4",
     "gulp-autoprefixer": "0.0.6",
@@ -60,6 +60,7 @@
     "vinyl-source-stream": "~0.1.1",
     "browserify": "~3.38.1",
     "gulp-streamify": "0.0.5",
-    "junk": "~0.3.0"
+    "junk": "~0.3.0",
+    "gulp": "~3.8.6"
   }
 }

From 7b7ee9ea9138e1ee15cbb0d60ea9c17cedd09e03 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 11:49:47 -0400
Subject: [PATCH 03/11] make gulp use local bin.

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 9ed833bf..b16d8b4e 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "homepage": "http://resource.github.io/fabricator/",
   "main": "README.md",
   "scripts": {
+    "gulp": "gulp",
     "dev": "npm install && gulp dev",
     "prod": "npm install && gulp"
   },

From 0506d526c782e9ddf0d533e41a9140f0b5e7e7fc Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:01:49 -0400
Subject: [PATCH 04/11] make prototypes output to root.

this eliminates the extra `{{pathBase}}` variable
---
 src/toolkit/views/partials/intro.html | 4 ++--
 src/toolkit/views/partials/menu.html  | 2 +-
 src/toolkit/views/partials/outro.html | 4 ++--
 tasks/template.js                     | 2 --
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/toolkit/views/partials/intro.html b/src/toolkit/views/partials/intro.html
index 48ba4681..c5e3c1c3 100644
--- a/src/toolkit/views/partials/intro.html
+++ b/src/toolkit/views/partials/intro.html
@@ -8,11 +8,11 @@
 	<title>Toolkit</title>
 
 	{{#if fabricator}}<!-- fabricator styles -->
-	<link rel="stylesheet" href="{{pathBase}}fabricator/styles/f.css">
+	<link rel="stylesheet" href="fabricator/styles/f.css">
 	<!-- /fabricator styles -->{{/if}}
 
 	<!-- toolkit styles -->
-	<link rel="stylesheet" href="{{pathBase}}toolkit/styles/toolkit.css">
+	<link rel="stylesheet" href="toolkit/styles/toolkit.css">
 	<!-- /toolkit styles -->
 
 </head>
diff --git a/src/toolkit/views/partials/menu.html b/src/toolkit/views/partials/menu.html
index a66f72aa..7ffdc7fe 100644
--- a/src/toolkit/views/partials/menu.html
+++ b/src/toolkit/views/partials/menu.html
@@ -34,7 +34,7 @@
 			<ul>
 				{{#each prototypes}}
 					<li>
-						<a href="prototypes/{{id}}.html" target="_blank">{{name}}</a>
+						<a href="prototype-{{id}}.html" target="_blank">{{name}}</a>
 					</li>
 				{{/each}}
 			</ul>
diff --git a/src/toolkit/views/partials/outro.html b/src/toolkit/views/partials/outro.html
index d7e27945..4558c39c 100644
--- a/src/toolkit/views/partials/outro.html
+++ b/src/toolkit/views/partials/outro.html
@@ -1,10 +1,10 @@
 
 	{{#if fabricator}}<!-- fabricator scripts -->
-	<script src="{{pathBase}}fabricator/scripts/f.js"></script>
+	<script src="fabricator/scripts/f.js"></script>
 	<!-- /fabricator scripts -->{{/if}}
 
 	<!-- toolkit scripts -->
-	<script src="{{pathBase}}toolkit/scripts/toolkit.js"></script>
+	<script src="toolkit/scripts/toolkit.js"></script>
 	<!-- /toolkit scripts -->
 
 </body>
diff --git a/tasks/template.js b/tasks/template.js
index 4e5cefbc..adcd8e70 100644
--- a/tasks/template.js
+++ b/tasks/template.js
@@ -40,7 +40,6 @@ var templateFabricator = function (file, enc, cb) {
 
 	// augment data object
 	data.fabricator = true;
-	data.pathBase = '';
 
 	// template pages
 	var source = file.contents.toString(),
@@ -64,7 +63,6 @@ var templatePrototype = function (file, enc, cb) {
 
 	// augment data object
 	data.fabricator = false;
-	data.pathBase = '../';
 
 	// use the filename as the key value lookup in the data.json object
 	var key = path.basename(file.path, '.html').replace(/-/g, '');

From 78ff31883baa718602551818574d46768209b07a Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:03:18 -0400
Subject: [PATCH 05/11] remove `./` from glob pattern to make watching work
 properly.

---
 gulpfile.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index f63cf14e..2a9a662e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,17 +27,17 @@ var config = {
 	src: {
 		scripts: {
 			fabricator: [
-				'./src/fabricator/scripts/prism.js',
-				'./src/fabricator/scripts/fabricator.js'
+				'src/fabricator/scripts/prism.js',
+				'src/fabricator/scripts/fabricator.js'
 			],
-			toolkit: './src/toolkit/assets/scripts/toolkit.js'
+			toolkit: 'src/toolkit/assets/scripts/toolkit.js'
 		},
 		styles: {
-			fabricator: './src/fabricator/styles/fabricator.scss',
-			toolkit: './src/toolkit/assets/styles/toolkit.scss'
+			fabricator: 'src/fabricator/styles/fabricator.scss',
+			toolkit: 'src/toolkit/assets/styles/toolkit.scss'
 		},
-		images: './src/toolkit/assets/images/**/*',
-		templates: './src/toolkit/views/*.html',
+		images: 'src/toolkit/assets/images/**/*',
+		templates: 'src/toolkit/views/*.html',
 		materials: [
 			'components',
 			'structures',
@@ -187,11 +187,11 @@ gulp.task('connect', connect.server({
 
 // watch
 gulp.task('watch', ['connect'], function () {
-	gulp.watch('./src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['templates']);
-	gulp.watch('./src/fabricator/styles/**/*.scss', ['styles:fabricator']);
-	gulp.watch('./src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
-	gulp.watch('./src/fabricator/scripts/**/*.js', ['scripts:fabricator']);
-	gulp.watch('./src/toolkit/assets/scripts/**/*.js', ['scripts:toolkit']);
+	gulp.watch('src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['templates']);
+	gulp.watch('src/fabricator/styles/**/*.scss', ['styles:fabricator']);
+	gulp.watch('src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
+	gulp.watch('src/fabricator/scripts/**/*.js', ['scripts:fabricator']);
+	gulp.watch('src/toolkit/assets/scripts/**/*.js', ['scripts:toolkit']);
 	gulp.watch(config.src.images, ['images']);
 });
 

From d1e43ed671e771bb5fa412ae6ec88ea78ed924df Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:38:20 -0400
Subject: [PATCH 06/11] update dependencies

---
 package.json | 47 ++++++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index b16d8b4e..14a5f38a 100644
--- a/package.json
+++ b/package.json
@@ -31,37 +31,34 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "gulp": "~3.8.5"
+    "gulp": "~3.8.6"
   },
   "devDependencies": {
-    "marked": "~0.2.10",
-    "mkdirp": "~0.3.5",
-    "handlebars": "~1.3.0",
-    "cheerio": "~0.13.1",
+    "browserify": "~4.2.1",
     "change-case": "~1.0.6",
-    "js-beautify": "~1.4.2",
-    "mkpath": "~0.1.0",
-    "gulp-util": "~2.2.20",
-    "gulp-uglify": "~0.2.1",
-    "gulp-jshint": "~1.3.4",
-    "gulp-autoprefixer": "0.0.6",
-    "gulp-imagemin": "~0.2.0",
-    "gulp-connect": "~1.0.10",
-    "gulp-csso": "~0.2.6",
-    "gulp-serve": "~0.1.1",
+    "cheerio": "~0.17.0",
+    "gulp-autoprefixer": "0.0.8",
     "gulp-clean": "~0.2.4",
+    "gulp-concat": "~2.3.3",
+    "gulp-connect": "~2.0.6",
+    "gulp-csso": "~0.2.9",
+    "gulp-if": "~1.2.2",
+    "gulp-imagemin": "~0.6.1",
+    "gulp-plumber": "~0.6.3",
+    "gulp-rename": "~1.2.0",
     "gulp-sass": "~0.7.2",
-    "through2": "~0.4.2",
-    "gulp-plumber": "~0.5.6",
-    "vinyl-map": "~1.0.0",
-    "gulp-concat": "~2.1.7",
-    "gulp-rename": "~1.0.0",
-    "gulp-if": "0.0.5",
-    "q": "~1.0.1",
-    "vinyl-source-stream": "~0.1.1",
-    "browserify": "~3.38.1",
     "gulp-streamify": "0.0.5",
+    "gulp-uglify": "~0.3.1",
+    "gulp-util": "~2.2.20",
+    "handlebars": "~2.0.0-alpha.4",
+    "js-beautify": "~1.5.1",
     "junk": "~0.3.0",
-    "gulp": "~3.8.6"
+    "marked": "~0.2.10",
+    "mkdirp": "~0.5.0",
+    "mkpath": "~0.1.0",
+    "q": "~1.0.1",
+    "through2": "~0.5.1",
+    "vinyl-map": "~1.0.1",
+    "vinyl-source-stream": "~0.1.1"
   }
 }

From 2e0c6f46977234493328c96d64bb8c5db0c2ebd3 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:39:06 -0400
Subject: [PATCH 07/11] adjust globbing patterns. update connect task syntax

---
 gulpfile.js | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 2a9a662e..d188cdcb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,17 +27,17 @@ var config = {
 	src: {
 		scripts: {
 			fabricator: [
-				'src/fabricator/scripts/prism.js',
-				'src/fabricator/scripts/fabricator.js'
+				'./src/fabricator/scripts/prism.js',
+				'./src/fabricator/scripts/fabricator.js'
 			],
-			toolkit: 'src/toolkit/assets/scripts/toolkit.js'
+			toolkit: './src/toolkit/assets/scripts/toolkit.js'
 		},
 		styles: {
-			fabricator: 'src/fabricator/styles/fabricator.scss',
-			toolkit: 'src/toolkit/assets/styles/toolkit.scss'
+			fabricator: './src/fabricator/styles/fabricator.scss',
+			toolkit: './src/toolkit/assets/styles/toolkit.scss'
 		},
 		images: 'src/toolkit/assets/images/**/*',
-		templates: 'src/toolkit/views/*.html',
+		templates: './src/toolkit/views/*.html',
 		materials: [
 			'components',
 			'structures',
@@ -178,16 +178,18 @@ gulp.task('build', ['clean'], function () {
 
 
 // server
-gulp.task('connect', connect.server({
-	root: [config.dest],
-	port: 9000,
-	livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false
-}));
+gulp.task('connect', function () {
+	connect.server({
+		root: [config.dest],
+		port: 9000,
+		livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false
+	});
+});
 
 
 // watch
 gulp.task('watch', ['connect'], function () {
-	gulp.watch('src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['templates']);
+	gulp.watch('src/toolkit/{components,structures,prototypes,documentation,views}/**/*.{html,md}', ['templates']);
 	gulp.watch('src/fabricator/styles/**/*.scss', ['styles:fabricator']);
 	gulp.watch('src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
 	gulp.watch('src/fabricator/scripts/**/*.js', ['scripts:fabricator']);

From 30a800265717d45dd656689493b4ac811b2c4a29 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:39:23 -0400
Subject: [PATCH 08/11] add template parts for notes

---
 src/toolkit/views/components.html    | 5 +++++
 src/toolkit/views/partials/menu.html | 1 +
 src/toolkit/views/prototypes.html    | 5 +++++
 src/toolkit/views/structures.html    | 5 +++++
 4 files changed, 16 insertions(+)

diff --git a/src/toolkit/views/components.html b/src/toolkit/views/components.html
index 7a64209b..44872bc8 100644
--- a/src/toolkit/views/components.html
+++ b/src/toolkit/views/components.html
@@ -18,6 +18,7 @@ <h1 data-toggle="details">Components</h1>
 				<div class="f-item-heading-group" data-toggle="details">
 					<span class="f-item-heading">{{name}}</span>
 					<div class="f-item-toggles">
+						{{#if notes}}<span class="f-toggle f-icon-notes" data-toggle-control="notes" title="toggle notes"></span>{{/if}}
 						<span class="f-toggle f-icon-code" data-toggle-control="code" title="toggle code"></span>
 					</div>
 				</div>
@@ -30,6 +31,10 @@ <h1 data-toggle="details">Components</h1>
 					{{{content}}}
 				</div>
 
+				{{#if notes}}<div class="f-item-notes" data-toggle="notes">
+					{{{notes}}}
+				</div>{{/if}}
+
 				<div class="f-item-code" data-toggle="code">
 					<pre><code class="language-markup">{{content}}</code></pre>
 				</div>
diff --git a/src/toolkit/views/partials/menu.html b/src/toolkit/views/partials/menu.html
index 7ffdc7fe..e5693e1f 100644
--- a/src/toolkit/views/partials/menu.html
+++ b/src/toolkit/views/partials/menu.html
@@ -2,6 +2,7 @@
 
 	<div class="f-controls">
 		<div class="f-icon-details" data-toggle-control="details" title="toggle details"></div>
+		<div class="f-icon-notes" data-toggle-control="notes" title="toggle notes"></div>
 		<div class="f-icon-code" data-toggle-control="code" title="toggle code"></div>
 	</div>
 
diff --git a/src/toolkit/views/prototypes.html b/src/toolkit/views/prototypes.html
index a1bcaf11..562b5a52 100644
--- a/src/toolkit/views/prototypes.html
+++ b/src/toolkit/views/prototypes.html
@@ -17,6 +17,7 @@ <h1 data-toggle="details">Prototypes</h1>
 				<div class="f-item-heading-group">
 					<span class="f-item-heading">{{name}}</span>
 					<div class="f-item-toggles">
+						{{#if notes}}<span class="f-toggle f-icon-notes" data-toggle-control="notes" title="toggle notes"></span>{{/if}}
 						<span class="f-toggle f-icon-code" data-toggle-control="code" title="toggle code"></span>
 					</div>
 				</div>
@@ -25,6 +26,10 @@ <h1 data-toggle="details">Prototypes</h1>
 					<pre><code class="language-markup">{{content}}</code></pre>
 				</div>
 
+				{{#if notes}}<div class="f-item-notes" data-toggle="notes">
+					{{{notes}}}
+				</div>{{/if}}
+
 			{{/each}}
 
 		</div>
diff --git a/src/toolkit/views/structures.html b/src/toolkit/views/structures.html
index 78973160..6d372823 100644
--- a/src/toolkit/views/structures.html
+++ b/src/toolkit/views/structures.html
@@ -18,6 +18,7 @@ <h1 data-toggle="details">Structures</h1>
 				<div class="f-item-heading-group" data-toggle="details">
 					<span class="f-item-heading">{{name}}</span>
 					<div class="f-item-toggles">
+						{{#if notes}}<span class="f-toggle f-icon-notes" data-toggle-control="notes" title="toggle notes"></span>{{/if}}
 						<span class="f-toggle f-icon-code" data-toggle-control="code" title="toggle code"></span>
 					</div>
 				</div>
@@ -30,6 +31,10 @@ <h1 data-toggle="details">Structures</h1>
 					{{{content}}}
 				</div>
 
+				{{#if notes}}<div class="f-item-notes" data-toggle="notes">
+					{{{notes}}}
+				</div>{{/if}}
+
 				<div class="f-item-code" data-toggle="code">
 					<pre><code class="language-markup">{{content}}</code></pre>
 				</div>

From 01a7bbd416f0efd702024d009bb554ef820afc72 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:42:32 -0400
Subject: [PATCH 09/11] double quote -> single quote

---
 src/fabricator/scripts/fabricator.js  | 85 +++++++++++++--------------
 src/toolkit/assets/scripts/toolkit.js |  2 +-
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/fabricator/scripts/fabricator.js b/src/fabricator/scripts/fabricator.js
index 68b015ef..b51f9472 100644
--- a/src/fabricator/scripts/fabricator.js
+++ b/src/fabricator/scripts/fabricator.js
@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 /**
  * Global `fabricator` object
@@ -27,7 +27,7 @@ fabricator.test = {};
 
 // test for localstorage
 fabricator.test.localStorage = (function () {
-	var test = "_f";
+	var test = '_f';
 	try {
 		localStorage.setItem(test, test);
 		localStorage.removeItem(test);
@@ -48,9 +48,9 @@ if (fabricator.test.localStorage) {
  * @type {Object}
  */
 fabricator.dom = {
-	primaryMenu: document.querySelector(".f-menu"),
-	menuItems: document.querySelectorAll(".f-menu li a"),
-	menuToggle: document.querySelector(".f-menu-toggle")
+	primaryMenu: document.querySelector('.f-menu'),
+	menuItems: document.querySelectorAll('.f-menu li a'),
+	menuToggle: document.querySelector('.f-menu-toggle')
 };
 
 
@@ -59,11 +59,11 @@ fabricator.dom = {
  */
 fabricator.buildColorChips = function () {
 
-	var chips = document.querySelectorAll(".f-color-chip"),
+	var chips = document.querySelectorAll('.f-color-chip'),
 		color;
 
 	for (var i = chips.length - 1; i >= 0; i--) {
-		color = chips[i].querySelector(".f-color-chip__color").innerHTML;
+		color = chips[i].querySelector('.f-color-chip__color').innerHTML;
 		chips[i].style.borderTopColor = color;
 	}
 
@@ -78,7 +78,7 @@ fabricator.buildColorChips = function () {
 fabricator.setActiveItem = function () {
 
 	/**
-	 * @return {Array} Sorted array of menu item "ids"
+	 * @return {Array} Sorted array of menu item 'ids'
 	 */
 	var parsedItems = function () {
 
@@ -88,16 +88,16 @@ fabricator.setActiveItem = function () {
 		for (var i = fabricator.dom.menuItems.length - 1; i >= 0; i--) {
 
 			// remove active class from items
-			fabricator.dom.menuItems[i].classList.remove("f-active");
+			fabricator.dom.menuItems[i].classList.remove('f-active');
 
 			// get item href
-			href = fabricator.dom.menuItems[i].getAttribute("href");
+			href = fabricator.dom.menuItems[i].getAttribute('href');
 
 			// get id
-			if (href.indexOf("#") > -1) {
-				id = href.split("#").pop();
+			if (href.indexOf('#') > -1) {
+				id = href.split('#').pop();
 			} else {
-				id = href.split("/").pop().replace(/\.[^/.]+$/, "");
+				id = href.split('/').pop().replace(/\.[^/.]+$/, '');
 			}
 
 			items.push(id);
@@ -110,7 +110,7 @@ fabricator.setActiveItem = function () {
 
 
 	/**
-	 * Match the "id" in the window location with the menu item, set menu item as active
+	 * Match the 'id' in the window location with the menu item, set menu item as active
 	 */
 	var setActive = function () {
 
@@ -118,22 +118,22 @@ fabricator.setActiveItem = function () {
 			items = parsedItems(),
 			id, index;
 
-		// get window "id"
-		if (href.indexOf("#") > -1) {
-			id = window.location.hash.replace("#", "");
+		// get window 'id'
+		if (href.indexOf('#') > -1) {
+			id = window.location.hash.replace('#', '');
 		} else {
-			id = window.location.pathname.split("/").pop().replace(/\.[^/.]+$/, "");
+			id = window.location.pathname.split('/').pop().replace(/\.[^/.]+$/, '');
 		}
 
 		// find the window id in the items array
 		index = (items.indexOf(id) > -1) ? items.indexOf(id) : 0;
 
 		// set the matched item as active
-		fabricator.dom.menuItems[index].classList.add("f-active");
+		fabricator.dom.menuItems[index].classList.add('f-active');
 
 	};
 
-	window.addEventListener("hashchange", setActive);
+	window.addEventListener('hashchange', setActive);
 
 	setActive();
 
@@ -153,13 +153,13 @@ fabricator.primaryMenuControls = function () {
 
 	// toggle classes on certain elements
 	var toggleClasses = function () {
-		document.querySelector("html").classList.toggle("state--menu-active");
-		fabricator.dom.menuToggle.classList.toggle("f-icon-menu");
-		fabricator.dom.menuToggle.classList.toggle("f-icon-close");
+		document.querySelector('html').classList.toggle('state--menu-active');
+		fabricator.dom.menuToggle.classList.toggle('f-icon-menu');
+		fabricator.dom.menuToggle.classList.toggle('f-icon-close');
 	};
 
 	// toggle classes on click
-	toggle.addEventListener("click", function () {
+	toggle.addEventListener('click', function () {
 		toggleClasses();
 	});
 
@@ -169,7 +169,7 @@ fabricator.primaryMenuControls = function () {
 	};
 
 	for (var i = 0; i < fabricator.dom.menuItems.length; i++) {
-		fabricator.dom.menuItems[i].addEventListener("click", closeMenu);
+		fabricator.dom.menuItems[i].addEventListener('click', closeMenu);
 	}
 
 	return this;
@@ -183,52 +183,52 @@ fabricator.primaryMenuControls = function () {
 fabricator.allItemsToggles = function () {
 
 	var items = {
-		details: document.querySelectorAll("[data-toggle=\"details\"]"),
-		notes: document.querySelectorAll("[data-toggle=\"notes\"]"),
-		code: document.querySelectorAll("[data-toggle=\"code\"]")
+		details: document.querySelectorAll('[data-toggle="details"]'),
+		notes: document.querySelectorAll('[data-toggle="notes"]'),
+		code: document.querySelectorAll('[data-toggle="code"]')
 	};
 
-	var toggleAllControls = document.querySelectorAll(".f-controls [data-toggle-control]");
+	var toggleAllControls = document.querySelectorAll('.f-controls [data-toggle-control]');
 
 	var options = (fabricator.test.localStorage) ? JSON.parse(localStorage.fabricator) : fabricator.options;
 
 	// toggle all
 	var toggleAllItems = function (type, value) {
 
-		var button = document.querySelector(".f-controls [data-toggle-control=" + type + "]"),
+		var button = document.querySelector('.f-controls [data-toggle-control=' + type + ']'),
 			_items = items[type];
 
 		for (var i = 0; i < _items.length; i++) {
 			if (value) {
-				_items[i].classList.remove("f-item-hidden");
+				_items[i].classList.remove('f-item-hidden');
 			} else {
-				_items[i].classList.add("f-item-hidden");
+				_items[i].classList.add('f-item-hidden');
 			}
 		}
 
 		// toggle styles
 		if (value) {
-			button.classList.add("f-active");
+			button.classList.add('f-active');
 		} else {
-			button.classList.remove("f-active");
+			button.classList.remove('f-active');
 		}
 
 		// update options
 		options.toggles[type] = value;
 
 		if (fabricator.test.localStorage) {
-			localStorage.setItem("fabricator", JSON.stringify(options));
+			localStorage.setItem('fabricator', JSON.stringify(options));
 		}
 
 	};
 
 	for (var i = 0; i < toggleAllControls.length; i++) {
 
-		toggleAllControls[i].addEventListener("click", function (e) {
+		toggleAllControls[i].addEventListener('click', function (e) {
 
 			// extract info from target node
-			var type = e.target.getAttribute("data-toggle-control"),
-				value = e.target.className.indexOf("f-active") < 0;
+			var type = e.target.getAttribute('data-toggle-control'),
+				value = e.target.className.indexOf('f-active') < 0;
 
 			// toggle the items
 			toggleAllItems(type, value);
@@ -253,19 +253,18 @@ fabricator.allItemsToggles = function () {
  */
 fabricator.singleItemToggle = function () {
 
-	var itemToggleSingle = document.querySelectorAll(".f-toggle");
+	var itemToggleSingle = document.querySelectorAll('.f-toggle');
 
 	// toggle single
 	var toggleSingleItemCode = function (e) {
 		var group = this.parentNode.parentNode.parentNode,
-			toggle = this.attributes["data-toggle-control"].value,
-			type = e.target.getAttribute("data-toggle-control");
+			type = e.target.getAttribute('data-toggle-control');
 
-		group.querySelector("[data-toggle=" + type + "]").classList.toggle("f-item-hidden");
+		group.querySelector('[data-toggle=' + type + ']').classList.toggle('f-item-hidden');
 	};
 
 	for (var i = 0; i < itemToggleSingle.length; i++) {
-		itemToggleSingle[i].addEventListener("click", toggleSingleItemCode);
+		itemToggleSingle[i].addEventListener('click', toggleSingleItemCode);
 	}
 
 	return this;
diff --git a/src/toolkit/assets/scripts/toolkit.js b/src/toolkit/assets/scripts/toolkit.js
index 3d572c5a..bb905b19 100644
--- a/src/toolkit/assets/scripts/toolkit.js
+++ b/src/toolkit/assets/scripts/toolkit.js
@@ -2,4 +2,4 @@
  * Toolkit JavaScript
  */
 
-"use strict";
+'use strict';

From cb5f2bcb1ed1f899f1c7feae7c894e9a15721b73 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 12:43:01 -0400
Subject: [PATCH 10/11] fix prototype output pathing

---
 gulpfile.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index d188cdcb..96f456b2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -144,7 +144,7 @@ gulp.task('collate', function () {
 });
 
 // templates
-gulp.task('template', function () {
+gulp.task('templates:fabricator', function () {
 	var opts = {
 		data: config.dest + '/fabricator/data/data.json',
 		prototype: false
@@ -156,18 +156,22 @@ gulp.task('template', function () {
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
-gulp.task('prototypes', function () {
+gulp.task('templates:prototypes', function () {
 	var opts = {
 		data: config.dest + '/fabricator/data/data.json',
 		prototype: true
 	};
 	return gulp.src('./src/toolkit/prototypes/*.html')
 		.pipe(template(opts))
-		.pipe(gulp.dest(config.dest + '/prototypes'));
+		.pipe(rename({
+			prefix: 'prototype-'
+		}))
+		.pipe(gulp.dest(config.dest))
+		.pipe(gulpif(config.dev, connect.reload()));
 });
 
 gulp.task('templates', ['collate'], function () {
-	gulp.start('template', 'prototypes');
+	gulp.start('templates:fabricator', 'templates:prototypes');
 });
 
 

From a3671c14a9d04b0ecfb26f5fdc7bd7d2f4eb6be5 Mon Sep 17 00:00:00 2001
From: Luke Askew <laskew@resource.com>
Date: Thu, 17 Jul 2014 14:26:17 -0400
Subject: [PATCH 11/11] 0.5.0 bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 14a5f38a..07f59963 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fabricator",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Fabricator is a tool for creating modular website toolkits",
   "homepage": "http://resource.github.io/fabricator/",
   "main": "README.md",