style-navigation.html

---
layout: openstackbootstrap
title: OpenStack Style Guide
javascript:
  - url: /js/style-guide.js
---
<div class="container">
    <div class="row">
		<h1>OpenStack Style Guide</h1>
    	<div class="col-lg-3 col-md-3 col-sm-3">
    		{% include sidebar.html %}
    	</div>
        <div class="col-lg-9 col-md-9 col-sm-9">
			<div class="row">
				<h3>Sidebars</h3>
				<p>
					<ul>
						<li>Sidebars can be left or right.</li>
						<li>Columns class/size should be col-lg-3 col-md-3 col-sm-3.</li>
						<li>Margins should match element it's next to, ideally 40px 0.</li>
						<li>Padding should be 30px.</li>
						<li>$lightblue background.</li>
						<li>Border-radius of 4px.</li>
					</ul>
				</p>
				<p>
					Example HTML
				</p>
				<p>

<pre><code>&lt;div class="col-lg-3 col-md-3 col-sm-3"&gt;
  &lt;div class="sidebar"&gt;
    &lt;ul&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Framework & Grid System&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Typography&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Form Elements&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Lists&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#"&gt;Videos&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

				</p>
			</div>
        </div>
    </div>
</div>