From 90c17c78564bf8d7dd62bd07cff7142cc60c6d3e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 9 Dec 2016 13:36:24 +0800
Subject: ADD: Navbar layout is back

---
 index.html | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index b5f21a2..9acea0c 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,9 @@
             padding: 1rem .5rem;
             border-radius: .3rem;
         }
+        .navbar.bg-grey {
+            padding: 1rem;
+        }
         .grid-hero {
             margin-top: 10rem;
             margin-bottom: 10rem;
@@ -957,6 +960,7 @@
                 <div class="btn-group">
                     <a href="#grid" class="btn btn-primary">flexbox grid</a>
                     <a href="#responsive" class="btn btn-primary">responsive</a>
+                    <a href="#navbar" class="btn btn-primary">navbar</a>
                     <a href="#empty" class="btn btn-primary">empty states</a>
                 </div>
             </section>
@@ -1148,6 +1152,69 @@
             </section>
         </section>
 
+        <section id="navbar" class="container grid-960">
+            <header class="text-center"><h4>navbar</h4></header>
+            <section class="notes">
+                <p><strong>Navbar</strong> is a layout container that appear in the header of apps and websites. </p>
+            </section>
+            <div class="columns">
+                <div class="column">
+                    <section class="navbar bg-grey">
+                        <div class="navbar-section">
+                            <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a>
+                            <a href="#navbar" class="navbar-brand">Spectre.css</a>
+                        </div>
+                        <div class="navbar-section">
+                            <input class="form-input input-inline" type="text" placeholder="search" />
+                            <a href="#navbar" class="btn btn-link">documents</a>
+                            <a href="#navbar" class="btn btn-link">login</a>
+                            <a href="#navbar" class="btn btn-primary">signup</a>
+                        </div>
+                    </section>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="column">
+                    <section class="navbar">
+                        <div class="navbar-section">
+                            <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a>
+                            <a href="#navbar" class="navbar-brand">Spectre.css</a>
+                        </div>
+                        <div class="navbar-section">
+                            <input class="form-input input-inline" type="text" placeholder="search" />
+                            <figure class="avatar ml-10 mr-10">
+                                <img src="demo/img/avatar-4.png" />
+                            </figure>
+                            <a href="#navbar" class="btn btn-primary">profile</a>
+                        </div>
+                    </section>
+                </div>
+            </div>
+
+            <section class="notes">
+                <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. By default, there is no grey background.</p>
+            </section>
+
+            <!-- navbar example -->
+<pre class="code lang-html">
+&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
+    &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link btn-lg&quot;</span>&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+        &lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-brand&quot;</span>&gt;Spectre.css&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/section</span>&gt;
+    &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
+        &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-inline&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;login&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;signup&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/section</span>&gt;
+&lt;<span class="tag">/header</span>&gt;
+</pre>
+
+        </section>
+
         <section id="empty" class="container grid-960">
             <header class="text-center"><h4>empty states / blank slates</h4></header>
             <section class="notes">
@@ -2506,7 +2573,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer container grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.29
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.30
             </p>
             <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>
-- 
cgit v1.3.1-23-gd82d