Merge pull request #344 from rackerlabs/fix-css-cathysiller1

fix-css-cathysiller1

Author: CITguy

docs/_templates/partials/see-also.njk

@@ -1,6 +1,6 @@
 <section>
   <h2 id="see-also">See Also</h2>
-  <ul>
+  <ul class="hxList">
     {% for href,label in page.also %}
       <li><a href="{{href}}">{{label}}</a></li>
     {% endfor %}

docs/components/box/index.html

@@ -20,7 +20,7 @@ <h2 id="containers">Containers</h2>
     <p>
       Containers can be defined in one of two ways:
     </p>
-    <ol>
+    <ol class="hxList">
       <li>Using an <code>&lt;hx-div&gt;</code> element <em class="hxSubBody">(recommended)</em></li>
       <li>Adding the <code>.hxBox</code> CSS class to any block element</li>
     </ol>

docs/components/buttons/index.html

@@ -21,7 +21,7 @@ <h2 id="basic-button">Basic Button</h2>
       Define a basic button by adding the <code>.hxBtn</code>
       CSS class to any of the following elements:
     </p>
-    <ul>
+    <ul class="hxList">
       <li><code>&lt;button&gt;</code></li>
       <li><code>&lt;a href="..."&gt;</code></li>
       <li><code>&lt;input type="button"&gt;</code></li>

docs/components/grid/index.html

@@ -20,7 +20,7 @@
 
 <section><!-- rows -->
   <h2 id="rows">Rows</h2>
-  <ul>
+  <ul class="hxList">
     <li>
       Rows are containers that allow you to divide their
       <em>width</em> amongst their children.
@@ -61,7 +61,7 @@ <h2 id="rows">Rows</h2>
 
 <section><!-- columns -->
   <h2 id="columns">Columns</h2>
-  <ul>
+  <ul class="hxList">
     <li>
       Columns are containers that allow you to divide their
       <em>height</em> amongst their children.
@@ -118,7 +118,7 @@ <h2 id="column-width">Column Width</h2>
     Use the <code>.hxSpan-{N}</code> modifier (1 &le; N &le; 12) to create
     columns that are a fraction of a 12-column row width.
   </p>
-  <ul>
+  <ul class="hxList">
     <li><code>.hxSpan-{N}-{size}</code> responsive classes are available.</li>
     <li><code>.hxSpan-{N}</code> is shorthand for <code>.hxSpan-{N}-xs</code></li>
   </ul>
@@ -195,7 +195,7 @@ <h2 id="column-offset">Column Offset</h2>
     You can use the <code>.hxOffset-{N}</code> class (1 &le; N &le; 11)
     to offset your column from the start of the row.
   </p>
-  <ul>
+  <ul class="hxList">
     <li>
       <code>.hxOffset-{N}-{size}</code> responsive classes are available
     </li>
@@ -254,7 +254,7 @@ <h2 id="column-ordering">Column Ordering</h2>
     Use the <code>.hxOrder-{N}</code> class (1 &le; N &le; 12) to reorder
     your columns.
   </p>
-  <ul>
+  <ul class="hxList">
     <li>
       <code>.hxOrder-{N}-{size}</code> responsive classes are available
     </li>
@@ -294,7 +294,7 @@ <h2 id="column-ordering">Column Ordering</h2>
 
 <section><!-- responsive options -->
   <h2 id="responsive-options">Responsive Options</h2>
-  <ul>
+  <ul class="hxList">
     <li>All column modifiers support adding an optional breakpoint.</li>
     <li>
       Omitting the breakpoint will default to <code>xs</code>
@@ -396,7 +396,7 @@ <h2 id="column-wrapping">Column Wrapping</h2>
   <p>
     The following example should arrange the content into:
   </p>
-  <ul>
+  <ul class="hxList">
     <li>3 columns on small screens</li>
     <li>4 columns on medium screens</li>
     <li>6 columns on all other sizes</li>
@@ -500,7 +500,7 @@ <h2 id="styling-containers">Styling Containers</h2>
   <hx-alert type="warning" status="warning" static>
     Do not attempt to style rows or columns directly.
   </hx-alert>
-  <ul>
+  <ul class="hxList">
     <li>Rows have margins set to align the outer columns with surrounding content.</li>
     <li>Columns in a row have padding applied to them to simulate gutters.</li>
     <li>Wrap your content in a <code>&lt;div&gt;</code> to apply custom CSS.</li>
@@ -560,7 +560,7 @@ <h2 id="styling-containers">Styling Containers</h2>
 
 <section><!-- going gutterless -->
   <h2 id="going-gutterless">Going Gutterless</h2>
-  <ul>
+  <ul class="hxList">
     <li>
       Add the <code>.hxGutterless</code> CSS class to your row container
       to remove gutters from its immediate children.

docs/components/layouts/horizontal-layout.html

@@ -30,7 +30,7 @@
             </nav>
             <h1>Primary Panel</h1>
 
-            <ul>
+            <ul class="hxList">
               <li>
                 Horizontal layout enables two variable width panels, entitled
                 "primary" and "secondary", to operate adjacent to one another.

docs/components/layouts/index.html

@@ -107,7 +107,7 @@ <h2 id="prerequisites">Prerequisites</h2>
       To get the most out of this documentation, developers are
       expected to:
     </p>
-    <ol>
+    <ol class="hxList">
       <li>
         Review the instructions in the
         <a href="guides/getting-started">Getting Started</a> guide.
@@ -242,7 +242,7 @@ <h2 id="document-body">Document Body</h2>
       Add one of the following CSS classes to the <code>&lt;body&gt;</code> element
       to begin with pre-defined layout styles.
     </p>
-    <ul>
+    <ul class="hxList">
       <li><code>hxVertical</code> for a vertical layout</li>
       <li><code>hxHorizontal</code> for a horizontal layout</li>
     </ul>
@@ -254,7 +254,7 @@ <h2 id="app-container">App Container</h2>
       The app container serves as the mounting point
       for your single-page application.
     </p>
-    <ul>
+    <ul class="hxList">
       <li>It must have an ID of <code>app</code>.</li>
       <li>It can be any block element.</li>
     </ul>
@@ -295,7 +295,7 @@ <h2 id="stage-area">Stage</h2>
       that use virtual DOM technologies (i.e., hyperscript). It can be divided
       into three areas:
     </p>
-    <ol>
+    <ol class="hxList">
       <li><a href="#nav-area">Nav</a> (optional)</li>
       <li><a href="#main-content">Main Content</a></li>
       <li>left or right <a href="#side-rail">Side Rail</a> (optional)</li>
@@ -335,7 +335,7 @@ <h2 id="nav-area">Nav</h2>
     <p>
       The nav area houses hyperlinks to pages within your application.
     </p>
-    <ul>
+    <ul class="hxList">
       <li>
         It must have an ID of <code>nav</code>.
       </li>
@@ -363,7 +363,7 @@ <h2 id="main-content">Main Content</h2>
     <p>
       The main content area houses primary page content.
     </p>
-    <ul>
+    <ul class="hxList">
       <li>
         It must have an ID of <code>content</code>.
       </li>
@@ -401,7 +401,7 @@ <h2 id="side-rail">Side Rail</h2>
     <p>
       The side rail houses secondary page content.
     </p>
-    <ul>
+    <ul class="hxList">
       <li>
         Use an <code>&lt;aside&gt;</code> element to provide the best support
         for accessible user agents.

docs/components/layouts/vertical-layout.html

@@ -29,7 +29,7 @@
 
         <h1>Main Content</h1>
 
-        <ul>
+        <ul class="hxList">
           <li>
             Footer will be pushed off viewport by lengthy content.
           </li>
@@ -52,7 +52,7 @@ <h1>Main Content</h1>
 
       <aside class="hxSiderail hxBox hxMd">
         <h2>Side Rail</h2>
-        <ul>
+        <ul class="hxList">
           <li>
             A side rail may appear before or after main content.
           </li>

docs/components/lists/index.html

@@ -74,7 +74,7 @@ <h2 id="unordered-list">Unordered List</h2>
     <p class="hxSubBody">Added: v0.10.0</p>
     <div class="example">
       <div>
-        <ul>
+        <ul class="hxList">
           <li>List Item 1</li>
           <li>
             List Item 2 with a bunch of extra text that
@@ -93,7 +93,7 @@ <h2 id="unordered-list">Unordered List</h2>
 
       <footer>
         {% code 'html' %}
-          <ul>
+          <ul class="hxList">
             <li>List Item 1</li>
             <li>List Item 2...</li>
             <li>List Item 3
@@ -114,7 +114,7 @@ <h2 id="ordered-list">Ordered List</h2>
     <p class="hxSubBody">Added: v0.10.0</p>
     <div class="example">
       <div>
-        <ol>
+        <ol class="hxList">
           <li>Child Item</li>
           <li>Child Item</li>
           <li>Child Item
@@ -147,7 +147,7 @@ <h2 id="ordered-list">Ordered List</h2>
 
       <footer>
         {% code 'html' %}
-          <ol>
+          <ol class="hxList">
             ...
             <li>Child Item
               <ol>

docs/components/popovers/test.html

@@ -105,7 +105,7 @@ <h2>Unconventional HTML5-compatible ID</h2>
 
   <section id="popover-in-scrolling-container" class="test">
     <h2>Within Scrollable Container</h2>
-    <ul>
+    <ul class="hxList">
       <li>TODO: Should we hide the popover when its relative element isn't visible (scrolls out of view)?</li>
     </ul>
     <hx-div scroll="vertical" class="scrolling hxMd">

docs/components/typography/index.html

@@ -126,7 +126,7 @@ <h2 id="caption">Caption</h2>
     <p>
       Apply the Helix "caption" style with any of the following configurations:
     </p>
-    <ul>
+    <ul class="hxList">
       <li>
         A <code>&lt;caption&gt;</code> element within a
         <a href="components/tables">Table</a>
@@ -171,7 +171,7 @@ <h2 id="sub-body">Sub-Body</h2>
     <p>
       Apply the "sub-body" style with any of the following:
     </p>
-    <ul>
+    <ul class="hxList">
       <li>A <code>&lt;small&gt;</code> element</li>
       <li>Add the <code>.hxSubBody</code> CSS class to any element</li>
     </ul>