Touched up mustache and made sure everything was dynamic

- Touched up mustache and made sure everything was dynamic
- Still probably need to review some syntax

dist/_data/data.json

@@ -3,6 +3,7 @@
 	"heading" : "Page Header",
 	"subheading" : "Subtext For Header",
 	"text" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+	"placeholder" : "Placeholder Text",
 	"url" : "#",
 	"cta" : "Call To Action",
 	"ariaLabel" : "Aria label",
@@ -13,7 +14,13 @@
 	"badge" : "23",
 	"label" : "New Label",
 	"labelClass" : "label-default",
-	"progressLabelClass" : "sr-only",
+	"progressBarClass" : "",
+	"progressCompleteText" : "60% Complete",
+	"progressMinWidth" : false,
+	"removeProgressText" : true,
+	"ariaMin" : 0,
+	"ariaMax" : 100,
+	"ariaNow" : 60,
 	"src" : "../../images/bootstrapthumb.jpg",
 	"alt" : "Bootstrap Thumbnail",
 	"caption" : "Caption Text",
@@ -69,6 +76,7 @@
 		}	
 	],
 	"caret" : "caret",
+	"dropdownClass" : "dropdown",
 	"dropdownList" : [
 		{ 
 			"url" : "#",
@@ -154,5 +162,86 @@
 		{ "text" : "Porta ac consectetur ac" },
 		{ "text" : "Vestibulum at eros" }
 	],
-	"navbarClass" : "navbar-default"
+	"navbarBrandText" : "Pattern Lab",
+	"navbarNavClass" : "",
+	"navbarNavFirst" : true,
+	"navbarNavLast" : {
+		"navbarNavClass" : "navbar-right"
+	},
+	"navbarNav" : [
+		{
+			"url" : "#",
+			"text" : "Link"
+		},
+		{
+			"url" : "#",
+			"text" : "Link"
+		},
+		{
+			"url" : "#",
+			"text" : "Dropdown",
+			"hasDropdown" : true,
+			"dropdownMenu" : [
+				{ 
+					"url" : "#",
+					"text" : "Action"	 
+				},
+				{ 
+					"url" : "#",
+					"text" : "Another action" 
+				},
+				{ 
+					"url" : "#",
+					"text" : "Something else here"
+				},
+				{ 
+					"separator" : "true"
+				},
+				{ 
+					"url" : "#",
+					"text" : "Link 4" 
+				}
+
+			]
+		}
+	],
+	"navbarFormClass" : "navbar-left",
+	"navbarClass" : "navbar-default",
+	"mediaList" : [
+		{
+			"mediaLeft" : true,
+			"mediaRight" : false,
+			"nestedMedia" : [
+				{
+					"mediaLeft" : false,
+					"mediaRight" : true
+				},
+				{
+					"mediaLeft" : true,
+					"mediaRight" : false
+				}
+			]
+
+		},
+		{
+			"heading" : "Item 2",
+			"text" : "This is the second item that is not nested.",
+			"mediaLeft" : true,
+			"mediaRight" : false,
+			"nestedMedia" : [
+				{
+					"heading" : "Nested Item 1",
+					"text" : "This is the first nested item of the list.",
+					"mediaLeft" : true,
+					"mediaRight" : false
+				},
+				{
+					"heading" : "Nested Item 2",
+					"text" : "This is the second nested item of the list",
+					"mediaLeft" : false,
+					"mediaRight" : true
+				}
+			]	
+		}
+	]
 }

dist/_patterns/00-atoms/04-forms/00-input.mustache

@@ -0,0 +1,5 @@
+<input type="text" class="form-control" placeholder="{{ placeholder }}" aria-describedby="basic-addon1">
+
+
+
+

dist/_patterns/00-atoms/07-media/04-progress-bars.mustache

@@ -0,0 +1,6 @@
+<div class="progress">
+	<div class="progress-bar {{ progressBarClass }}" role="progressbar" aria-valuenow="{{ ariaNow }}" aria-valuemin="{{ ariaMin }}" aria-valuemax="{{ ariaMax }}" style="width: {{ ariaNow }}%;{{# progressMinWidth }}min-width: {{ progressMinWidth }}em{{/ progressMinWidth }}">
+    	{{# removeProgressText }}<span class="sr-only">{{/ removeProgressText }}{{ progressCompleteText }}{{# removeProgressText }}</span>{{/ removeProgressText }}
+	</div>
+</div>
+

dist/_patterns/00-atoms/07-media/05-progress-bars-variants.mustache

@@ -0,0 +1,88 @@
+<h2 id="progress-label">With label</h2>
+<p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
+<div class="progress">
+	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+    60%
+  	</div>
+</div>
+
+<p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p>
+<div class="progress">
+	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
+    0%
+  	</div>
+</div>
+<div class="progress">
+	<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
+    2%
+  	</div>
+</div>
+
+<h2 id="progress-alternatives">Contextual alternatives</h2>
+<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
+<div class="progress">
+  	<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    	<span class="sr-only">40% Complete (success)</span>
+  	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    	<span class="sr-only">20% Complete</span>
+  	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    	<span class="sr-only">60% Complete (warning)</span>
+  	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    	<span class="sr-only">80% Complete (danger)</span>
+  	</div>
+</div>
+
+
+<h2 id="progress-striped">Striped</h2>
+<p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p>
+<div class="progress">
+	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    	<span class="sr-only">40% Complete (success)</span>
+	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    	<span class="sr-only">20% Complete</span>
+  	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    	<span class="sr-only">60% Complete (warning)</span>
+  	</div>
+</div>
+<div class="progress">
+  	<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    	<span class="sr-only">80% Complete (danger)</span>
+  	</div>
+</div>
+
+<h2 id="progress-animated">Animated</h2>
+<p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
+<div class="progress">
+  	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
+</div>
+
+
+<h2 id="progress-stacked">Stacked</h2>
+<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
+<div class="progress">
+  	<div class="progress-bar progress-bar-success" style="width: 35%">
+    	<span class="sr-only">35% Complete (success)</span>
+  	</div>
+  	<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
+    	<span class="sr-only">20% Complete (warning)</span>
+  	</div>
+  	<div class="progress-bar progress-bar-danger" style="width: 10%">
+    	<span class="sr-only">10% Complete (danger)</span>
+  	</div>
+</div>
+

dist/_patterns/00-atoms/08-media/06-thumbnails.mustache → dist/_patterns/00-atoms/07-media/06-thumbnails.mustache

@@ -1,4 +1,4 @@
-<a href="#" class="thumbnail">
+<a href="{{ url }}" class="thumbnail">
 	<img src="{{ src }}" alt="{{ alt }}">
 </a>