Update doc and examples.

1 files changed, 2 insertions, 84 deletions

diff --git a/index.html b/index.html
index 5f80424..2d482b0 100644
--- a/index.html
+++ b/index.html
@@ -546,85 +546,6 @@
                         </div>
                     </form>
                 </div>
-                <div class="column col-6">
-                    <form class="form-horizontal" action="#forms">
-                        <div class="form-group">
-                            <div class="col-sm-3">
-                                <label class="form-label" for="input-example-4">Name</label>
-                            </div>
-                            <div class="col-sm-9">
-                                <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3">
-                                <label class="form-label" for="input-example-5">Email</label>
-                            </div>
-                            <div class="col-sm-9">
-                                <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3">
-                                <label class="form-label">Gender</label>
-                            </div>
-                            <div class="col-sm-9">
-                                <label class="form-radio">
-                                    <input type="radio" name="gender" />
-                                    <i class="form-icon"></i> Male
-                                </label>
-                                <label class="form-radio">
-                                    <input type="radio" name="gender" checked />
-                                    <i class="form-icon"></i> Female
-                                </label>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
-                                <select class="form-select">
-                                    <option>Choose an option</option>
-                                    <option>Slack</option>
-                                    <option>Skype</option>
-                                    <option>Hipchat</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
-                                <label class="form-switch">
-                                    <input type="checkbox" />
-                                    <i class="form-icon"></i> Send me emails with news and tips
-                                </label>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3">
-                                <label class="form-label" for="input-example-6">Message</label>
-                            </div>
-                            <div class="col-sm-9">
-                                <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
-                                <label class="form-checkbox">
-                                    <input type="checkbox" />
-                                    <i class="form-icon"></i> Remember me
-                                </label>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-3"></div>
-                            <div class="col-sm-9">
-                                <button class="btn btn-primary" type="submit">Submit</button>
-                                <button class="btn btn-link" type="reset">Cancel</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
             </div>
 
             <!-- forms example -->
@@ -680,10 +601,11 @@
 
             <section class="notes">
                 <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
+                <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p>
             </section>
 
             <div class="columns">
-                <div class="column col-12">
+                <div class="column col-6">
                     <form class="form-horizontal" action="#forms">
                         <div class="form-group">
                             <div class="col-3">
@@ -764,10 +686,6 @@
                 </div>
             </div>
 
-            <section class="notes">
-                <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. Please note <code>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;