Update readme and demo

Author: rbrtsmith

README.md

@@ -422,22 +422,22 @@ A simple max-width centered container to wrap your content. You can see it appli
 Nebula CSS comes with three types of list: Bare-list, Inline-list and Matrix-list.
 
 ### Bare-list
-Strips a list of all default list styling.
+Strips a list of all default list styling. [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list)
 ```html
 <ul class="o-bare-list">
   <li>item</li>
   <li>item</li>
 </ul>
 ```
-Spaced
+Spaced [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list-spaced)
 ```html
 <ul class="o-bare-list o-bare-list--spaced-md">
   <li class="o-bare-list__item">item</li>
   <li class="o-bare-list__item">item</li>
 </ul>
 ```
 
-Spaced by breakpoint
+Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list-spaced-by-breakpoint)
 ```html
 <ul class="o-bare-list o-bare-list--spaced-md@sm">
   <li class="o-bare-list__item">item</li>
@@ -446,30 +446,30 @@ Spaced by breakpoint
 ```
 
 ## Inline list
-Exactly like the bare list but the items are rendered horizontally.
+Exactly like the bare list but the items are rendered horizontally. [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list)
 ```html
 <ul class="o-inline-list">
   <li>item</li>
   <li>item</li>
 </ul>
 ```
-Spaced
+Spaced [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-spaced)
 ```html
 <ul class="o-inline-list o-inline-list--spaced-md">
   <li class="o-inline-list__item">item</li>
   <li class="o-inline-list__item">item</li>
 </ul>
 ```
 
-Spaced by breakpoint
+Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-spaced-by-breakpoint)
 ```html
 <ul class="o-inline-list o-inline-list--spaced-md@sm">
   <li class="o-inline-list__item">item</li>
   <li class="o-inline-list__item">item</li>
 </ul>
 ```
 
-## Inline list
+## Matrix list
 Exactly like the inline list but the items vertical spacing matches the horizontal.
 
 Spaced
@@ -480,15 +480,26 @@ Spaced
 </ul>
 ```
 
-Spaced by breakpoint
+Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#matrix-list)
 ```html
 <ul class="o-matrix-list o-matrix-list--spaced-md@sm">
   <li class="o-matrix-list__item">item</li>
   <li class="o-matrix-list__item">item</li>
 </ul>
 ```
 ##utilities
-* Push
+
+Form the Utilities Layer in ITCSS, each a single responsibility class.  They are intended to be used as overrides.
+
+## Push
+
+Push adds margins to elments, Nebula CSS encourages [single direction margin declarations](http://csswizardry.com/2012/06/single-direction-margin-declarations/) to eliminate confusion around collapsing borders
+
+```html
+  <div class="u-push--right"></div>
+  <div class="u-push--bottom"></div>
+  <div class="u-push--right@sm"></div>
+´´´
 * Flush
 * Soft
 * Hard

demo/index.html

@@ -510,7 +510,7 @@ <h3>Nested</h3>
   <section class="o-section-md">
     <div class="o-site-wrap o-site-wrap--padding">
       <h2>Lists</h2>
-      <h3>Bare list</h3>
+      <h3 id="bare-list">Bare list</h3>
       <p>Removes all browser default list styling</p>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-bare-list">
@@ -521,7 +521,7 @@ <h3>Bare list</h3>
         </ul>
       </div>
 
-      <h3>Bare list spaced</h3>
+      <h3 id="bare-list-spaced">Bare list spaced</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-bare-list o-bare-list--spaced-md">
           <li class="o-bare-list__item">bare list item</li>
@@ -531,7 +531,7 @@ <h3>Bare list spaced</h3>
         </ul>
       </div>
 
-      <h3>Bare list spaced at breakpoint</h3>
+      <h3 id="bare-list-spaced-breakpoint">Bare list spaced at breakpoint</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-bare-list o-bare-list--spaced-md@md">
           <li class="o-bare-list__item">bare list item</li>
@@ -541,7 +541,7 @@ <h3>Bare list spaced at breakpoint</h3>
         </ul>
       </div>
 
-      <h3>Inline list</h3>
+      <h3 id="inline-list">Inline list</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-inline-list">
           <li class="o-inline-list__item">inline list item</li>
@@ -551,7 +551,7 @@ <h3>Inline list</h3>
         </ul>
       </div>
 
-      <h3>Inline list spaced</h3>
+      <h3 id="inline-list-spaced">Inline list spaced</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-inline-list o-inline-list--spaced-md">
           <li class="o-inline-list__item">inline list item</li>
@@ -561,7 +561,7 @@ <h3>Inline list spaced</h3>
         </ul>
       </div>
 
-      <h3>Inline list spaced at breakpoint</h3>
+      <h3 id="inline-list-spaced-breakpoint">Inline list spaced at breakpoint</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-inline-list o-inline-list--spaced-md@lg">
           <li class="o-inline-list__item">inline list item</li>
@@ -571,7 +571,7 @@ <h3>Inline list spaced at breakpoint</h3>
         </ul>
       </div>
 
-      <h3>Matrix list at breakpoint</h3>
+      <h3 id="matrix-list">Matrix list at breakpoint</h3>
       <div class="demo-card u-push-bottom-md">
         <ul class="o-matrix-list o-matrix-list-md@lg">
           <li class="o-matrix-list__item">matrix list item</li>