diff options
ADD: Navbar layout is back
1 files changed, 68 insertions, 1 deletions
| -rw-r--r-- | index.html | 69 |
@@ -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"> +<<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> + <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link btn-lg"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> + <<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand"</span>>Spectre.css<<span class="tag">/a</span>> + <<span class="tag">/section</span>> + <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-inline"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>>documents<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>documents<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>login<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>signup<<span class="tag">/a</span>> + <<span class="tag">/section</span>> +<<span class="tag">/header</span>> +</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> |