#8 - Document sidebar component

src/content/sidebar.html

@@ -3,9 +3,53 @@
 section: Components
 ---
 
-<h3>Sidebar Default</h3>
+<blockquote class="blockquote-sm blockquote-success">
+	<p>Documentation for the Sidebar CSS component, for the Sidenav javascript component see <a href="../sidenav">Sidenav</a>.</p>
+</blockquote>
 
 <div class="row row-spacing">
+	<div class="col-md-12">
+		<h3>Sidebar</h3>
+
+		<blockquote class="blockquote-sm blockquote-success">
+			<p>An opinionated container to display related content.</p>
+		</blockquote>
+	</div>
+
+	<div class="col-md-6">
+		<div class="sidebar">
+			<div class="sidebar-header">
+				Sidebar Header
+			</div>
+			<div class="sidebar-body">
+				Sidebar Body
+			</div>
+			<div class="sidebar-footer">
+				Sidebar Footer
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="row row-spacing">
+	<div class="col-md-12">
+		<h3>Sidebar Fixed</h3>
+
+		<blockquote class="blockquote-sm blockquote-warning">
+			<p>There is no fixed positioned sidebar. The <a href="../sidenav">Sidenav</a> javascript plugin handles slideout drawer variations.</p>
+		</blockquote>
+	</div>
+</div>
+
+<div class="row row-spacing">
+	<div class="col-md-12">
+		<h3>Sidebar Default</h3>
+
+		<blockquote class="blockquote-sm blockquote-success">
+			<p>Add class <code>sidebar-default</code> to <code>sidebar</code> to apply a light theme.</p>
+		</blockquote>
+	</div>
+
 	<div class="col-md-6">
 		<div class="sidebar sidebar-default">
 			<div class="sidebar-header">
@@ -57,9 +101,14 @@ <h5>Tags</h5>
 	</div>
 </div>
 
-<h3>Sidebar Inverse</h3>
-
 <div class="row row-spacing">
+	<div class="col-md-12">
+		<h3>Sidebar Inverse</h3>
+
+		<blockquote class="blockquote-sm blockquote-success">
+			<p>Add class <code>sidebar-inverse</code> to <code>sidebar</code> to apply a darker theme.</p>
+		</blockquote>
+	</div>
 	<div class="col-md-6">
 		<div class="sidebar sidebar-inverse">
 			<div class="sidebar-header">
@@ -111,10 +160,16 @@ <h5>Tags</h5>
 	</div>
 </div>
 
-<h3>Product Menu</h3>
 
 <div class="row row-spacing">
 	<div class="col-md-12">
+
+		<h3>Product Menu</h3>
+
+		<blockquote class="blockquote-sm blockquote-success">
+			<p>This skin will be removed from Lexicon and is only to be used as a reference.</p>
+		</blockquote>
+
 		<div class="sidebar sidebar-inverse product-menu1" style="max-width:320px;height:800px;position:relative;">
 			<div class="sidebar-header">
 				<h4>

src/content/sidenav.html

@@ -6,7 +6,7 @@
 <div class="row row-spacing">
 	<div class="col-md-12">
 		<blockquote class="blockquote-sm blockquote-success">
-			<p>A jQuery plugin that creates a slideout navigation on the right or left.</p>
+			<p>A jQuery plugin that creates a slideout navigation on the right or left, for the sidebar css component see <a href="../sidebar">Sidebar</a>.</p>
 		</blockquote>
 
 		<h5>Syntax with Options:</h5>