Update README & Demo

Author: rbrtsmith

README.md

@@ -29,11 +29,13 @@ Nebula CSS also ships with some common yet useful abstractions such as the Flag
 * [Breakpoints](#breakpoints)
 * [Grid](#grid)
 * [Flag](#flag)
+* [Section](#section)
 * [Site-wrap](#site-wrap)
 * [Lists](#lists)
   * [Bare list](#bare-list)
   * [Inline list](#inline-list)
   * [Matrix list](#matrix-list)
+  * [Uniformed list](#uniformed-list)
 * [Utilities](#utilities)
   * [Push](#push)
   * [Flush](#flush)
@@ -530,43 +532,49 @@ Varying guttering depending on the breakpoint
 
 There are various BEM modifiers that you can add to the grid as shown below:
 
-* Matrix (Vertical guttering that matches horizontal) [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-matrix)
+* Matrix (Vertical guttering that matches horizontal)
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-matrix)
 
     ```html
     <div class="o-grid o-grid--gutter-sm o-grid--matrix" />
     ```
-* Equal height items [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-equal-height)
+* Equal height items
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-equal-height)
 
     ```html
     <div class="o-grid o-grid--equal-height" />
     ```
-* Reverse item order [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-reverse)
+* Reverse item order
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-reverse)
 
     ```html
     <div class="o-grid o-grid--reverse" />
     ```
-* Vertically centered items [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-vertically-centered)
+* Vertically centered items
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-vertically-centered)
 
     ```html
     <div class="o-grid o-grid--center" />
     ```
-* Bottom aligned items [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-bottom-aligned)
+* Bottom aligned items
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-bottom-aligned)
 
     ```html
     <div class="o-grid o-grid--bottom" />
   ```
-* Horizontally centered items [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-horizontally-aligned)
+* Horizontally centered items
+  [Demo](http://rbrtsmith.com/nebula-css/demo/#grid-horizontally-aligned)
 
     ```html
     <div class="o-grid u-text-center" />
     ```
 
 ## Flag
 
-[Demo](http://rbrtsmith.com/nebula-css/demo/#flag)
-
 One of most underrated CSS abstractions originally thought up by [Harry Roberts](https://twitter.com/csswizardry) is the flag object.  It allows you to mix up fixed width components with fluid ones, is infinitely composable can be nested inside of the grid, or a grid nested inside of the fluid component it's incredibly versatile.  Oh and it also allows you to vertically align the contents to boot.
 
+[Demo](http://rbrtsmith.com/nebula-css/demo/#flag)
+
 ```html
 <div class="o-flag">
   <div class="o-flag__component">
@@ -579,35 +587,51 @@ One of most underrated CSS abstractions originally thought up by [Harry Roberts]
 ```
 
 ## Site-wrap
-A simple max-width centered container to wrap your content. You can see it applied throughout the demo page. The `--padding` modifier adds horizontal padding to the container.
+A simple max-width centred container to wrap your content. You can see it applied throughout the demo page. The `--padding` modifier adds horizontal padding to the container.
+[demo](http://rbrtsmith.com/nebula-css/demo/#site-wrap)
 
 ```html
 <div class="o-site-wrap o-site-wrap--padding">
   Main content.
 </div>
 ```
 
-## Lists
+## Section
+Adds padding top & bottom.  The `md` suffix in this example maps onto a corresponding key on the `$nb-section-spacing` map that denotes the spacing amount.
+[demo](http://rbrtsmith.com/nebula-css/demo/#section)
+
+Typically used to space sections and sub-sections of content.
 
+```html
+<div class="o-section-md">
+  Main content.
+</div>
+```
+
+## Lists
 Nebula CSS comes with three types of list: Bare-list, Inline-list and Matrix-list.
+[demo](http://rbrtsmith.com/nebula-css/demo/#lists)
 
 ### Bare-list
-Strips a list of all default list styling. [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list)
+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 [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list-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 [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list-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>
@@ -616,22 +640,24 @@ Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#bare-list-spac
 ```
 
 ## Inline list
-Exactly like the bare list but the items are rendered horizontally. [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list)
+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 [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-spaced)
 ```html
+Spaced [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-spaced)
 <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 [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-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>
@@ -641,6 +667,7 @@ Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#inline-list-sp
 
 ## Matrix list
 Exactly like the inline list but the items vertical spacing matches the horizontal.
+[Demo](http://rbrtsmith.com/nebula-css/demo/#matrix-list)
 
 Spaced
 ```html
@@ -650,20 +677,42 @@ Spaced
 </ul>
 ```
 
-Spaced by breakpoint [Demo](http://rbrtsmith.com/nebula-css/demo/#matrix-list)
+Spaced by breakpoint
 ```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
 
+## Uniformed list
+Throws the list items into a horizontal alignment, each having a uniformed width.
+[Demo](http://rbrtsmith.com/nebula-css/demo/#uniformed-list)
+
+```html
+<ul class="o-uniformed-list">
+  <li class="o-uniformed-list__item">item</li>
+  <li class="o-uniformed-list__item">item</li>
+</ul>
+```
+
+Uniformed by breakpoint.
+```html
+<ul class="o-uniformed-list@lg">
+  <li class="o-uniformed-list__item">item</li>
+  <li class="o-uniformed-list__item">item</li>
+</ul>
+```
+
+##utilities
 Form the Utilities Layer in ITCSS, each a single responsibility class.  They are intended to be used as overrides.
+[Demo]((http://rbrtsmith.com/nebula-css/demo/#utilities))
 
 ### Push
+Adds margins.
+[Demo]((http://rbrtsmith.com/nebula-css/demo/#push))
 
-Adds margins, Nebula CSS encourages [single direction margin declarations](http://csswizardry.com/2012/06/single-direction-margin-declarations/) to eliminate confusion around collapsing borders
+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-left-md"></div>
@@ -683,6 +732,8 @@ Removes margins
 
 ### Soft
 Adds padding
+[Demo]((http://rbrtsmith.com/nebula-css/demo/#soft))
+
 ```html
 <div class="u-soft-md"></div>
 <div class="u-soft-top-md"></div>
@@ -705,15 +756,17 @@ Removes padding
 
 ### Text-align
 Adds text-alignment.
+[Demo]((http://rbrtsmith.com/nebula-css/demo/#text-align))
 ```html
 <div class="u-text-left"></div>
 <div class="u-text-center"></div>
 <div class="u-text-right"></div>
 ```
 
 ### Hidden
-
 Hides elements, or visually hides (Still accessible.)
+[Demo]((http://rbrtsmith.com/nebula-css/demo/#hidden))
+
 ```html
 <div class="u-hidden"></div>
 <div class="u-visually-hidden"></div>

demo/index.html

@@ -679,7 +679,7 @@ <h3>Uniformed list at breakpoint</h3>
 
   <section class="o-section-md" id="utilities">
     <h2>Utilities</h2>
-    <h3>Push / Flush - Margins</h3>
+    <h3 id="push">Push / Flush - Margins</h3>
     <p>Push adds margins using <code>$nb-spacing-unit</code>, use <code>flush</code> remove margin</p>
     <div class="c-demo-card u-push-bottom-md">
       <div class="c-demo-card-alt u-push-bottom-md">
@@ -697,7 +697,7 @@ <h3>Push / Flush - Margins</h3>
       </div>
     </div>
 
-    <h3>Soft / Hard - Padding</h3>
+    <h3 id="soft">Soft / Hard - Padding</h3>
     <p>Soft adds padding using <code>$nb-spacing-unit</code>, use <code>hard</code> to remove padding</p>
     <div class="c-demo-card u-push-bottom-md">
       <div class="c-demo-card-alt u-soft-md">
@@ -730,7 +730,7 @@ <h3>Soft / Hard - Padding</h3>
       </div>
     </div>
 
-    <h3>Text align</h3>
+    <h3 id="text-align">Text align</h3>
     <div class="c-demo-card u-push-bottom-md">
       <div class="u-text-center">
         Text center
@@ -747,7 +747,7 @@ <h3>Text align</h3>
       </div>
     </div>
 
-    <h3>Hidden</h3>
+    <h3 id="hidden">Hidden</h3>
     <p>Note this uses <code>display: none;</code> use <code>u-visually-hidden</code> if you want the content to be accessible to screen readers.</p>
     <div class="c-demo-card u-push-bottom-md">
       hidden: