Merge pull request #16 from tachyons-css/add-html-to-component-docs

Include html in component docs

Author: johno

examples/components/forms/sign_in/1/index.html

@@ -42,6 +42,33 @@ <h4>Stats</h4>
 bytes | selectors | declarations
   </pre>
 
+  <h1>HTML used</h1>
+  <pre>
+    &lt;form action=&quot;index_submit&quot; method=&quot;get&quot; accept-charset=&quot;utf-8&quot; class=&quot;pv4 mv5&quot;&gt;
+  &lt;fieldset class=&quot;center mw6-ns ph3 ph4-ns bn&quot;&gt;
+    &lt;legend class=&quot;bold ttu tracked-mega pl3 pl0-ns pv3 f3-ns lightest-purple dn&quot;&gt;Sign In&lt;/legend&gt;
+    &lt;div class=&quot;mtm&quot;&gt;
+      &lt;label class=&quot;f6 mb2 pl3 pl0-ns ttu tracked-mega db&quot; for=&quot;Username&quot;&gt;Username&lt;/label&gt;
+      &lt;input class=&quot;f3 fw6 input-reset pl3 pv3 db ba white-80 b--white-20 w-100 bg-white-05 bg-white-10-focus&quot; type=&quot;text&quot; name=&quot;Username&quot; value=&quot;&quot; id=&quot;Username&quot; &gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;mtl&quot;&gt;
+      &lt;label class=&quot;f6 mb2 pl3 pl0-ns ttu tracked-mega db&quot; for=&quot;Username&quot;&gt;Password&lt;/label&gt;
+      &lt;input class=&quot;f3 fw6 input-reset pl3 pv3 db ba b--white-20 w-100 white-60 bg-white-05 bg-white-10-focus&quot; type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot; id=&quot;password&quot; &gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;mtl dt&quot;&gt;
+      &lt;div class=&quot;dtc w-50 wi-25-ns v-mid&quot;&gt;
+        &lt;input class=&quot;input-reset bg-white-05 lightest-purple pa3 brs fw6 ba b--white-20 ttu tracked-mega bg-white-10-focus&quot; type=&quot;submit&quot; value=&quot;Sign In&quot;&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;dtc w-50 wi-75-ns v-mid&quot;&gt;
+          &lt;a class=&quot;link dim db lightest-purple pv1&quot; href=&quot;#&quot;&gt;Sign Up&lt;/a&gt;
+          &lt;a class=&quot;link dim db lightest-purple pv1&quot; href=&quot;#&quot;&gt;Forgot Password?&lt;/a&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+  </pre>
   <h1>Classes used</h1>
   <ul class="list pl0 lh-copy">
 

examples/components/forms/sign_up/1/index.html

@@ -60,6 +60,51 @@ <h4>Stats</h4>
 bytes | selectors | declarations
   </pre>
 
+  <h1>HTML used</h1>
+  <pre>
+    &lt;form action=&quot;index_submit&quot; method=&quot;get&quot; accept-charset=&quot;utf-8&quot; class=&quot;pvl mvxl&quot;&gt;
+  &lt;fieldset class=&quot;center mw6-ns phm phl-ns bn&quot;&gt;
+    &lt;legend class=&quot;semibold ttu tracked-mega plm pln-ns pvm f3-ns black-80&quot;&gt;Sign Up&lt;/legend&gt;
+    &lt;p class=&quot;f4  measure lh-copy mbl black-40 mtn&quot;&gt;
+      Enroll in this because it&#39;s a great idea. You&#39;ll receive an confirmation email with a link
+      to activate your account.
+    &lt;/p&gt;
+    &lt;div class=&quot;mtm&quot;&gt;
+      &lt;label class=&quot;f4 bold mbs plm pln-ns ttu tracked-mega db black-50&quot; for=&quot;Username&quot;&gt;Username
+      &lt;/label&gt;
+      &lt;input class=&quot;f3 bold input-text plm pvm db ba  b--white-20 w-100 bg-white-60 bg-white-80-focus&quot; type=&quot;text&quot; name=&quot;Username&quot; value=&quot;&quot; id=&quot;Username&quot; &gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;mtl&quot;&gt;
+      &lt;label class=&quot;f4 bold mbs plm pln-ns ttu tracked-mega db black-50&quot; for=&quot;Username&quot;&gt;Email
+      &lt;/label&gt;
+
+      &lt;input class=&quot;f3 bold input-text plm pvm db ba b--white-20 w-100 black-40 bg-white-60 bg-white-80-focus&quot; type=&quot;email&quot; name=&quot;password&quot; value=&quot;&quot; id=&quot;password&quot; &gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;mtl&quot;&gt;
+      &lt;label class=&quot;f4 bold mbs plm pln-ns ttu tracked-mega db black-50&quot; for=&quot;Username&quot;&gt;Password
+      &lt;/label&gt;
+
+      &lt;input class=&quot;f3 bold input-text plm pvm db ba b--white-20 w-100 black-40 bg-white-60 bg-white-80-focus&quot; type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot; id=&quot;password&quot; &gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;mtl mw4 dib mrl&quot;&gt;
+      &lt;label class=&quot;f4 bold mbs plm pln-ns ttu tracked-mega db black-50&quot; for=&quot;Username&quot;&gt;Zipcode
+      &lt;/label&gt;
+
+      &lt;input class=&quot;f3 bold input-text plm pvm db ba b--white-20 w-100 black-40 bg-white-60 bg-white-80-focus&quot; type=&quot;text&quot; name=&quot;text&quot; value=&quot;&quot; id=&quot;text&quot; &gt;
+    &lt;/div&gt;
+      &lt;div class=&quot;dib&quot;&gt;
+        &lt;input class=&quot;input-text bg-white-05 black-50 pam  semibold ba b--black-10 ttu tracked-mega bg-white-80-focus&quot; type=&quot;submit&quot; value=&quot;Sign Up&quot;&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;db bt ptl mtl bt b--black-10&quot;&gt;
+          &lt;a class=&quot;link dim  black-40 pvxs ttu tracked bold&quot; href=&quot;#&quot;&gt;Sign In&lt;/a&gt;
+          &lt;small class=&quot;ttu tracked black-30 phxs&quot;&gt;- or - &lt;/small&gt;
+          &lt;a class=&quot;link dim black-40 pvxs ttu tracked bold&quot;href=&quot;#&quot;&gt;Forgot Password?&lt;/a&gt;
+      &lt;/div&gt;
+
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+  </pre>
   <h1>Classes used</h1>
   <ul class="list pl0 lh-copy">