Merge pull request #342 from rackerlabs/css-audit

chore(wip): audit css

Author: Catherine Siller

docs/_templates/component.njk

@@ -21,7 +21,7 @@
       {% if page.also %}
         <a href="#see-also">See Also</a>
       {% endif %}
-      <hr />
+      <hr class="hxDivider" />
       <a class="top-link" href="#top">Back to Top</a>
     </nav>
   </aside>

docs/_templates/element.njk

@@ -57,7 +57,7 @@
       {% if page.also %}
         <a href="#see-also">See Also</a>
       {% endif %}
-      <hr />
+      <hr class="hxDivider" />
       <a class="top-link" href="#top">Back to Top</a>
     </nav>
   </aside>

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/_templates/partials/sidebar.njk

@@ -4,6 +4,6 @@
   {% if page.also %}
     <a href="#see-also">See Also</a>
   {% endif %}
-  <hr />
+  <hr class="hxDivider" />
   <a class="top-link" href="#top">Back to Top</a>
 </nav>

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>