Add indentation for better readability

11 years ago · a2825c1907
1 changed files with 236 additions and 248 deletions
--- a/index.html
+++ b/index.html
@ -69,7 +69,7 @@ layout: default

 <pre class="prettyprint">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
+  &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
 &lt;/header&gt;
 </pre>

@ -93,13 +93,9 @@ layout: default

 <pre class="prettyprint">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-Left
-&lt;/a&gt;
-&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-Right
-&lt;/a&gt;
+  &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Left&lt;/a&gt;
+  &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
+  &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Right&lt;/a&gt;
 &lt;/header&gt;
 </pre>

@ -122,13 +118,9 @@ Right

 <pre class="prettyprint">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
-Previous
-&lt;/a&gt;
-&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
-&lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;
-Next
-&lt;/a&gt;
+  &lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;Previous&lt;/a&gt;
+  &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
+  &lt;a class=&quot;button-next&quot; href=&quot;#&quot;&gt;Next&lt;/a&gt;
 &lt;/header&gt;
 </pre>

@ -162,23 +154,19 @@ Next

 <pre class="prettyprint">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-Left
-&lt;/a&gt;
-&lt;ul class=&quot;segmented-controller&quot;&gt;
-&lt;li class=&quot;active&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
-&lt;/li&gt;
-&lt;/ul&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-Right
-&lt;/a&gt;
+  &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Left&lt;/a&gt;
+  &lt;ul class=&quot;segmented-controller&quot;&gt;
+    &lt;li class=&quot;active&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Right&lt;/a&gt;
 &lt;/header&gt;
 </pre>

@ -227,38 +215,38 @@ Right

 <pre class="prettyprint">
 &lt;nav class=&quot;bar-tab&quot;&gt;
-&lt;ul class=&quot;tab-inner&quot;&gt;
-&lt;li class=&quot;tab-item active&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;
-    &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
-    &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
-  &lt;/a&gt;
-&lt;/li&gt;
-&lt;li class=&quot;tab-item&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;
-    &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
-    &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
-  &lt;/a&gt;
-&lt;/li&gt;
-&lt;li class=&quot;tab-item&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;
-    &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
-    &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
-  &lt;/a&gt;
-&lt;/li&gt;
-&lt;li class=&quot;tab-item&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;
-    &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
-    &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
-  &lt;/a&gt;
-&lt;/li&gt;
-&lt;li class=&quot;tab-item&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;
-    &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
-    &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
-  &lt;/a&gt;
-&lt;/li&gt;
-&lt;/ul&gt;
+  &lt;ul class=&quot;tab-inner&quot;&gt;
+    &lt;li class=&quot;tab-item active&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
+        &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
+        &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class=&quot;tab-item&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
+        &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
+        &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class=&quot;tab-item&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
+        &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
+        &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class=&quot;tab-item&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
+        &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
+        &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li class=&quot;tab-item&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
+        &lt;span class=&quot;icon icon-share&quot;&gt;&lt;/span&gt;
+        &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
+      &lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
 &lt;/nav&gt;
 </pre>

@ -294,20 +282,20 @@ Right
 <pre class="prettyprint">
 &lt;!-- Segmented controller in standard bar fixed to top --&gt;
 &lt;nav class=&quot;bar-standard&quot;&gt;
-&lt;ul class=&quot;segmented-controller&quot;&gt;
-&lt;li class=&quot;active&quot;&gt;
-  &lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
-&lt;/li&gt;
-&lt;/ul&gt;
+  &lt;ul class=&quot;segmented-controller&quot;&gt;
+    &lt;li class=&quot;active&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;Thing one&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href=&quot;#&quot;&gt;Thing two&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;a href=&quot;#&quot;&gt;Thing three&lt;/a&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;div class=&quot;bar-standard bar-header-secondary&quot;&gt;
-&lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
+  &lt;a class=&quot;button-block&quot;&gt;Block level button&lt;/a&gt;
 &lt;/div&gt;
 </pre>

@ -329,10 +317,10 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;Item 1&lt;/li&gt;
-&lt;li&gt;Item 2&lt;/li&gt;
-&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
-&lt;li&gt;Item 3&lt;/li&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -367,24 +355,24 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 1
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 2
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 3
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 1
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 2
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 3
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -403,9 +391,9 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;Item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
-&lt;li&gt;Item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
-&lt;li&gt;Item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
+  &lt;li&gt;Item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
+  &lt;li&gt;Item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
+  &lt;li&gt;Item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -442,27 +430,27 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 1
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-  &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 2
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-  &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#&quot;&gt;
-  Item 3
-  &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-  &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
-&lt;/a&gt;
-&lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 1
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+      &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 2
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+      &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#&quot;&gt;
+      Item 3
+      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+      &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -482,10 +470,10 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;Item 2 &lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Item 2 &lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -519,24 +507,24 @@ Right

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;
-Item 1
-&lt;div class=&quot;toggle&quot;&gt;
-  &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;/li&gt;
-&lt;li&gt;
-Item 2
-&lt;div class=&quot;toggle active&quot;&gt;
-  &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;/li&gt;
-&lt;li&gt;
-Item 3
-&lt;div class=&quot;toggle&quot;&gt;
-  &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;/li&gt;
+  &lt;li&gt;
+    Item 1
+    &lt;div class=&quot;toggle&quot;&gt;
+      &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    Item 2
+    &lt;div class=&quot;toggle active&quot;&gt;
+      &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;/li&gt;
+  &lt;li&gt;
+    Item 3
+    &lt;div class=&quot;toggle&quot;&gt;
+      &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -557,11 +545,11 @@ Item 3

 <pre class="prettyprint">
 &lt;ul class=&quot;table-view inset&quot;&gt;
-&lt;li&gt;Item 1&lt;/li&gt;
-&lt;li&gt;Item 2&lt;/li&gt;
-&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
-&lt;li&gt;Item 3&lt;/li&gt;
-&lt;li&gt;Item 4&lt;/li&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+  &lt;li&gt;Item 4&lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -673,26 +661,26 @@ Item 3

 <pre class="prettyprint">
 &lt;ul class=&quot;segmented-controller&quot;&gt;
-&lt;li class=&quot;active&quot;&gt;
-&lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
-&lt;/li&gt;
-&lt;li&gt;
-&lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
-&lt;/li&gt;
+  &lt;li class=&quot;active&quot;&gt;
+    &lt;a href=&quot;#item1&quot;&gt;Thing one&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#item2&quot;&gt;Thing two&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 &lt;ul class=&quot;inset table-view&quot;&gt;
-&lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
-Item 1
-&lt;/li&gt;
-&lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
-Item 2
-&lt;/li&gt;
-&lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
-Item 3
-&lt;/li&gt;
+  &lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
+    Item 1
+  &lt;/li&gt;
+  &lt;li id=&quot;item2&quot; class=&quot;segmented-controller-item&quot;&gt;
+    Item 2
+  &lt;/li&gt;
+  &lt;li id=&quot;item3&quot; class=&quot;segmented-controller-item&quot;&gt;
+    Item 3
+  &lt;/li&gt;
 &lt;/ul&gt;
 </pre>

@ -743,10 +731,10 @@ Item 3

 <pre class="prettyprint">
 &lt;form&gt;
-&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
-&lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
-&lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
-&lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Choose existing&lt;/a&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
+  &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
+  &lt;textarea rows=&quot;5&quot;&gt;&lt;/textarea&gt;
+  &lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Choose existing&lt;/a&gt;
 &lt;/form&gt;
 </pre>

@ -766,11 +754,11 @@ Item 3

 <pre class="prettyprint">
 &lt;form&gt;
-&lt;div class=&quot;input-group&quot;&gt;
-&lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
-&lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
-&lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
-&lt;/div&gt;
+  &lt;div class=&quot;input-group&quot;&gt;
+    &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot;&gt;
+    &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
+    &lt;input type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
+  &lt;/div&gt;
 &lt;/form&gt;
 </pre>

@ -799,20 +787,20 @@ Item 3

 <pre class="prettyprint">
 &lt;form&gt;
-&lt;div class=&quot;input-group&quot;&gt;
-&lt;div class=&quot;input-row&quot;&gt;
-  &lt;label&gt;Full name&lt;/label&gt;
-  &lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
-&lt;/div&gt;
-&lt;div class=&quot;input-row&quot;&gt;
-  &lt;label&gt;Email&lt;/label&gt;
-  &lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
-&lt;/div&gt;
-&lt;div class=&quot;input-row&quot;&gt;
-  &lt;label&gt;Username&lt;/label&gt;
-  &lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
-&lt;/div&gt;
-&lt;/div&gt;
+  &lt;div class=&quot;input-group&quot;&gt;
+    &lt;div class=&quot;input-row&quot;&gt;
+      &lt;label&gt;Full name&lt;/label&gt;
+      &lt;input type=&quot;text&quot; placeholder=&quot;Mister Ratchet&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;input-row&quot;&gt;
+      &lt;label&gt;Email&lt;/label&gt;
+      &lt;input type=&quot;email&quot; placeholder=&quot;ratchetframework@gmail.com&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;input-row&quot;&gt;
+      &lt;label&gt;Username&lt;/label&gt;
+      &lt;input type=&quot;text&quot; placeholder=&quot;goRatchet&quot;&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
 &lt;/form&gt;
 </pre>

@ -834,10 +822,10 @@ Item 3

 <pre class="prettyprint">
 &lt;div class=&quot;toggle active&quot;&gt;
-&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
+  &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;toggle&quot;&gt;
-&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
+  &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>

@ -857,7 +845,7 @@ document
      <h3 class="component-title">Popovers</h3>

      <div class="component-example">
-        <div id="popover" class="popover">  
+        <div id="popover" class="popover">
          <header class="bar-nav">
            <a class="button">
              Left
@ -882,25 +870,25 @@ document

 <pre class="prettyprint">
 &lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
-&lt;header class=&quot;bar-nav&quot;&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-  Left
-&lt;/a&gt;
-&lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
-&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
-  Right
-&lt;/a&gt;
-&lt;/header&gt;
-&lt;ul class=&quot;table-view&quot;&gt;
-&lt;li&gt;Item1&lt;/li&gt;
-&lt;li&gt;Item2&lt;/li&gt;
-&lt;li&gt;Item3&lt;/li&gt;
-&lt;li&gt;Item4&lt;/li&gt;
-&lt;li&gt;Item5&lt;/li&gt;
-&lt;li&gt;Item6&lt;/li&gt;
-&lt;li&gt;Item7&lt;/li&gt;
-&lt;li&gt;Item8&lt;/li&gt;
-&lt;/ul&gt;
+  &lt;header class=&quot;bar-nav&quot;&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
+      Left
+    &lt;/a&gt;
+    &lt;h3 class=&quot;title&quot;&gt;Popover title&lt;/h3&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
+      Right
+    &lt;/a&gt;
+  &lt;/header&gt;
+  &lt;ul class=&quot;table-view&quot;&gt;
+    &lt;li&gt;Item1&lt;/li&gt;
+    &lt;li&gt;Item2&lt;/li&gt;
+    &lt;li&gt;Item3&lt;/li&gt;
+    &lt;li&gt;Item4&lt;/li&gt;
+    &lt;li&gt;Item5&lt;/li&gt;
+    &lt;li&gt;Item6&lt;/li&gt;
+    &lt;li&gt;Item7&lt;/li&gt;
+    &lt;li&gt;Item8&lt;/li&gt;
+  &lt;/ul&gt;
 &lt;/div&gt;
 </pre>

@ -908,14 +896,14 @@ document

 <pre class="prettyprint">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;a href=&quot;#myPopover&quot;&gt;
-&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
-&lt;/a&gt;
+  &lt;a href=&quot;#myPopover&quot;&gt;
+    &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
+  &lt;/a&gt;
 &lt;/header&gt;
 </pre>

    </article>
-    
+
    <!-- Modals -->
    <article class="component" id="modals">
      <h3 class="component-title">Modals</h3>
@ -929,7 +917,7 @@ document
              Close
            </a>
          </header>
-          
+
          <div class="content content-padded">
            <p>The contents of my modal</p>
          </div>
@ -941,16 +929,16 @@ document
 &lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;

 &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
-&lt;header class=&quot;bar-nav&quot;&gt;
-&lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
-&lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
-  Close
-&lt;/a&gt;
-&lt;/header&gt;
-
-&lt;div class=&quot;content content-padded&quot;&gt;
-&lt;p&gt;The contents of my modal.&lt;/p&gt;
-&lt;/div&gt;
+  &lt;header class=&quot;bar-nav&quot;&gt;
+    &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
+      Close
+    &lt;/a&gt;
+  &lt;/header&gt;
+
+  &lt;div class=&quot;content content-padded&quot;&gt;
+    &lt;p&gt;The contents of my modal.&lt;/p&gt;
+  &lt;/div&gt;
 &lt;/div&gt;
 </pre>

@ -982,18 +970,18 @@ document

 <pre class="prettyprint">
 &lt;div class=&quot;slider&quot;&gt;
-&lt;ul&gt;
-&lt;li&gt;
-  &lt;img src=&quot;assets/img/slide-1.jpg&quot;&gt;
-  &lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;img src=&quot;assets/img/slide-2.jpg&quot;&gt;
-&lt;/li&gt;
-&lt;li&gt;
-  &lt;img src=&quot;assets/img/slide-3.jpg&quot;&gt;
-&lt;/li&gt;
-&lt;/ul&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;img src=&quot;assets/img/slide-1.jpg&quot;&gt;
+      &lt;span class=&quot;slide-text&quot;&gt;&larr; Slide me&lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;img src=&quot;assets/img/slide-2.jpg&quot;&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;img src=&quot;assets/img/slide-3.jpg&quot;&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
 &lt;/div&gt;
 </pre>

@ -1047,17 +1035,17 @@ document

 <pre class="prettyprint push-example">
 &lt;header class=&quot;bar-nav&quot;&gt;
-&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
+  &lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
 &lt;/header&gt;
 &lt;div class=&quot;content&quot;&gt;
-&lt;ul class=&quot;table-view&quot;&gt;
-  &lt;li&gt;
-      &lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
-          Go to page 2
-      &lt;/a&gt;
-      &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
+  &lt;ul class=&quot;table-view&quot;&gt;
+    &lt;li&gt;
+        &lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
+            Go to page 2
+        &lt;/a&gt;
+        &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
 &lt;/div&gt;
 </pre>