tidy up the examples a tiny bit... add appropriate headers.

edwelker · Jun 20, 2014 · 66b4c58 · 66b4c58
1 parent 44fcaa6
commit 66b4c58
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -3,11 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <title>NCBI standard css</title>
+	<link href="normalize.css" media="screen" rel="stylesheet" type="text/css"/>
+	<link href="standard_base.css" media="screen" rel="stylesheet" type="text/css"/>
+	<link href="standard_grid.css" media="screen" rel="stylesheet" type="text/css"/>
 </head>
 <body>
-   <h1>NCBI Standard CSS</h1>
-   <ul>
-        <li><a href="standard_base_demos.html">Standard base and grid demonstrations</a></li>
-        <li><a href="standard_message_demos.html">Standard message demos</a></li>
+    <div class="grid">
+        <div class="col">
+           <h1>NCBI Standard CSS</h1>
+           <ul>
+                <li><a href="standard_base_demos.html">Standard base and grid demonstrations</a></li>
+                <li><a href="standard_message_demos.html">Standard message demos</a></li>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/standard_base_demos.html b/standard_base_demos.html
@@ -52,6 +52,8 @@ <h6>Heading Six, 13px font-size, 18px line-height, 9px margin top/bottom.  Yes,
 <dd>Definition</dd>
 </dl>
 
+<h2>A very simple standard table example</h2>
+
 <table>
 <tr><th>One</th><th>Two</th></tr>
 <tr><td>a</td><td>b</td></tr>
@@ -111,11 +113,21 @@ <h2>Link Colors</h2>
 
 </div>
 
+<div class="col twelve_col">
+    <h2>Standard Max and Min page width values</h2>
+</div>
+
 <div style="width: 1200px; background-color: #ddf;">Max Width</div>
 <div style="width: 800px; background-color: #dfd;">Min Width</div>
 
 </div>
 
+<div class="grid">
+    <div class="col twelve_col">
+        <h2>Standard grid examples. With the lack of background on these columns, the gray areas represent the right-margins.</h2>
+    </div>
+</div>
+
 <div class="grid">
 	<div class="col one_col">1 col</div>
 	<div class="col two_col">two col</div>
@@ -205,7 +217,11 @@ <h2>Link Colors</h2>
 <div class="col twelve_col">12</div>
 </div>
 
-<div class="grid"><p>And now for content tests</p></div>
+<div class="grid">
+    <div class="col twelve_col">
+        <h2>Standard grid examples with content that's longer than the width of grid columns.  Everything should wrap.</h2>
+    </div>
+</div>
 
 <div class="grid">
 <div class="col one_col"> <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p></div>