Add Colors docs and update colors

1 files changed, 14 insertions, 14 deletions

diff --git a/docs/layout.html b/docs/layout.html
index b5991fb..d7c198c 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -227,9 +227,9 @@
           <div class="notes">
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p>
           </div>
-          <table class="docs-table table">
+          <table class="docs-table table text-center">
             <thead>
-              <tr class="text-center">
+              <tr>
                 <th></th>
                 <th>size-xs</th>
                 <th>size-sm</th>
@@ -240,7 +240,7 @@
             </thead>
             <tbody>
               <tr>
-                <td>hide-xs</td>
+                <td class="text-left">hide-xs</td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
@@ -248,7 +248,7 @@
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
-                <td>hide-sm</td>
+                <td class="text-left">hide-sm</td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
@@ -256,7 +256,7 @@
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
-                <td>hide-md</td>
+                <td class="text-left">hide-md</td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
@@ -264,14 +264,14 @@
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
               <tr>
-                <td>hide-lg</td>
+                <td class="text-left">hide-lg</td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
               </tr>
-              <tr>
+              <tr class="text-left">
                 <td>hide-xl</td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
@@ -293,9 +293,9 @@
             </ul>
           </section>
 
-          <table class="docs-table table">
+          <table class="docs-table table text-center">
             <thead>
-              <tr class="text-center">
+              <tr>
                 <th></th>
                 <th>size-xs</th>
                 <th>size-sm</th>
@@ -306,7 +306,7 @@
             </thead>
             <tbody>
               <tr>
-                <td>show-xs</td>
+                <td class="text-left">show-xs</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
@@ -314,7 +314,7 @@
                 <td><div class="bg-gray docs-dot"></div></td>
               </tr>
               <tr>
-                <td>show-sm</td>
+                <td class="text-left">show-sm</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-gray docs-dot"></div></td>
@@ -322,7 +322,7 @@
                 <td><div class="bg-gray docs-dot"></div></td>
               </tr>
               <tr>
-                <td>show-md</td>
+                <td class="text-left">show-md</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
@@ -330,7 +330,7 @@
                 <td><div class="bg-gray docs-dot"></div></td>
               </tr>
               <tr>
-                <td>show-lg</td>
+                <td class="text-left">show-lg</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
@@ -338,7 +338,7 @@
                 <td><div class="bg-gray docs-dot"></div></td>
               </tr>
               <tr>
-                <td>show-xl</td>
+                <td class="text-left">show-xl</td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>
                 <td><div class="bg-primary docs-dot"></div></td>