Add uniformed list, update demo.

Author: rbrtsmith

README.md

@@ -5,7 +5,7 @@
 
 Super low-level mobile-first Sass framework using the [ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4) architecture and the [BEMIT](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) naming convention.
 
-Ships with 100% zero cosmetic styling.  This allows every project built with Nebula CSS to have a completely bespoke look and feel with Nebula CSS doing the heavy lifting when it comes to layout and architecture.  This means it is totally upto you how you structure your colours, typography and cosmetic components, however you are encouraged to follow the ITCSS structure and BEMIT naming conventions.
+Ships with zero cosmetic styling.  This allows every consuming project to have a completely bespoke UI with Nebula CSS doing the heavy lifting when it comes to layout and architecture.  This means it is totally upto you how you structure your colours, typography and cosmetic components, however you are encouraged to follow the ITCSS structure and BEMIT naming conventions.
 
 At the core sits a highly flexible and and extendible grid system making use of the very powerful [map](https://www.viget.com/articles/sass-maps-are-awesome) feature of Sass.
 Maps are used extensively and allow the following features to be easily extended and in some cases composed:
@@ -17,7 +17,7 @@ Maps are used extensively and allow the following features to be easily extended
 * Section spacing
 * Spacing - margin & padding utilities
 
-Also ships with some common yet useful abstractions such as the Flag Object.
+Nebula CSS also ships with some common yet useful abstractions such as the Flag Object, list variations and an array of useful utilities.
 
 ##Table of contents
 

demo/dist/main.css

@@ -424,6 +424,11 @@ ol,
 dd {
   margin-left: 2rem; }
 
+code {
+  padding: 2px 4px;
+  background: #ddd;
+  font-family: courier new; }
+
 .o-site-wrap {
   max-width: 60rem;
   margin: 0 auto; }
@@ -527,6 +532,7 @@ dd {
     padding-left: 1rem; } }
 
 .o-matrix-list {
+  margin: 0;
   list-style: none; }
 
 .o-matrix-list__item {
@@ -790,12 +796,60 @@ dd {
     padding-top: 2rem;
     padding-bottom: 2rem; } }
 
-.demo-card {
+.o-uniformed-list {
+  margin: 0;
+  list-style: none;
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  text-align: center; }
+
+.o-uniformed-list > .o-uniformed-list__item {
+  display: table-cell;
+  padding: 0 0.5rem; }
+
+@media (min-width: 720px) {
+  .o-uniformed-list\@sm {
+    margin: 0;
+    list-style: none;
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    text-align: center; }
+  .o-uniformed-list\@sm > .o-uniformed-list__item {
+    display: table-cell;
+    padding: 0 0.5rem; } }
+
+@media (min-width: 960px) {
+  .o-uniformed-list\@md {
+    margin: 0;
+    list-style: none;
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    text-align: center; }
+  .o-uniformed-list\@md > .o-uniformed-list__item {
+    display: table-cell;
+    padding: 0 0.5rem; } }
+
+@media (min-width: 1200px) {
+  .o-uniformed-list\@lg {
+    margin: 0;
+    list-style: none;
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    text-align: center; }
+  .o-uniformed-list\@lg > .o-uniformed-list__item {
+    display: table-cell;
+    padding: 0 0.5rem; } }
+
+.c-demo-card {
   padding: 1rem;
   background: #222;
   color: #fff; }
 
-.demo-card-alt {
+.c-demo-card-alt {
   display: inline-block;
   padding: 0;
   background: #fff;
@@ -807,6 +861,18 @@ dd {
     .demo-img {
       width: 150px; } }
 
+.c-demo-button {
+  display: inline-block;
+  min-width: 135px;
+  padding: 1rem 2rem;
+  background: #222;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  text-align: center; }
+  .c-demo-button:hover, .c-demo-button:focus {
+    background: #434343; }
+
 .u-1\/1 {
   width: 100%; }
 
@@ -2109,6 +2175,9 @@ dd {
 .u-soft-left-md {
   padding-left: 1rem !important; }
 
+.u-soft-md {
+  padding: 1rem !important; }
+
 @media (min-width: 720px) {
   .u-soft-top-md\@sm {
     padding-top: 1rem !important; }
@@ -2117,7 +2186,9 @@ dd {
   .u-soft-bottom-md\@sm {
     padding-bottom: 1rem !important; }
   .u-soft-left-md\@sm {
-    padding-left: 1rem !important; } }
+    padding-left: 1rem !important; }
+  .u-soft-md\@sm {
+    padding: 1rem !important; } }
 
 @media (min-width: 960px) {
   .u-soft-top-md\@md {
@@ -2127,7 +2198,9 @@ dd {
   .u-soft-bottom-md\@md {
     padding-bottom: 1rem !important; }
   .u-soft-left-md\@md {
-    padding-left: 1rem !important; } }
+    padding-left: 1rem !important; }
+  .u-soft-md\@md {
+    padding: 1rem !important; } }
 
 @media (min-width: 1200px) {
   .u-soft-top-md\@lg {
@@ -2137,7 +2210,9 @@ dd {
   .u-soft-bottom-md\@lg {
     padding-bottom: 1rem !important; }
   .u-soft-left-md\@lg {
-    padding-left: 1rem !important; } }
+    padding-left: 1rem !important; }
+  .u-soft-md\@lg {
+    padding: 1rem !important; } }
 
 .u-hard {
   padding: 0 !important; }