add more examples

1 files changed, 58 insertions, 2 deletions

diff --git a/index.html b/index.html
index c8028a5..2310abf 100644
--- a/index.html
+++ b/index.html
@@ -166,6 +166,14 @@
                 <small>- Source</small>
             </blockquote>
 
+            <!-- blockquote example -->
+<pre class="code lang-html">
+&lt;<span class="tag">blockquote</span>&gt;
+    &lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;<span class="tag">/p</span>&gt;
+    &lt;<span class="tag">small</span>&gt;- Source&lt;<span class="tag">/small</span>&gt;
+&lt;<span class="tag">/blockquote</span>&gt;
+</pre>
+
             <header class="text-center"><h5>lists</h5></header>
             <div class="columns">
                 <div class="column col-6">
@@ -195,6 +203,22 @@
                     </ol>
                 </div>
             </div>
+
+            <!-- lists example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;list&quot;</span>&gt;
+    &lt;<span class="tag">li</span>&gt;list item 1&lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span>&gt;list item 2
+        &lt;<span class="tag">ul</span>&gt;
+            &lt;<span class="tag">li</span>&gt;list item 2.1&lt;<span class="tag">/li</span>&gt;
+            &lt;<span class="tag">li</span>&gt;list item 2.2&lt;<span class="tag">/li</span>&gt;
+            &lt;<span class="tag">li</span>&gt;list item 2.3&lt;<span class="tag">/li</span>&gt;
+        &lt;<span class="tag">/ul</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span>&gt;list item 3&lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</pre>
+
         </section>
 
         <section id="layout" class="grid-960">
@@ -473,9 +497,9 @@
                     <form>
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
-                            <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+                            <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" />
                         </div>
-                        <div class="form-group">
+                        <div class="form-group has-success">
                             <label class="form-label" for="input-example-2">Email</label>
                             <input class="form-input" type="email" id="input-example-2" placeholder="Email" />
                         </div>
@@ -638,6 +662,38 @@
 &lt;<span class="tag">/form</span>&gt;
 </pre>
 
+            <section class="notes">
+                <p>If you want to have a horizontal form, add the class <code class="label">form-horizontal</code> to the &lt;form&gt; container. And add the class <code class="label">col-[1-12]</code> to the child elements for form row layout. Please note <code class="label">form-horizontal</code> only works in viewports that are at least 840px wide.</p>
+            </section>
+
+            <!-- forms example -->
+<pre class="code lang-html">
+&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label col-3&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
+            &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
+        &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- form structure --&gt;</span>
+&lt;<span class="tag">/form</span>&gt;
+</pre>
+
+            <section class="notes">
+                <p>To use form validation styles, add <code class="label">is-success</code> and <code class="label">is-danger</code> to the controls or add <code class="label">has-success</code> and <code class="label">has-danger</code> to parent elements.</p>
+            </section>
+
+            <!-- forms example -->
+<pre class="code lang-html">
+&lt;<span class="tag">form</span>&gt;
+    <span class="com">&lt;!-- form validation styles --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group has-success&quot;</span>&gt;
+        &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
+        &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
+    &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/form</span>&gt;
+</pre>
+
             <header class="text-center"><h5>input groups</h5></header>
             <div class="columns">
                 <div class="column">