From 91fc6d75c2ea6a83ac03a40f22bbbf800ee1d45a Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 19 Nov 2017 16:08:47 -0500
Subject: [PATCH] Use class table for float docs

---
 docs/source/docs/floats.blade.md | 63 ++++++++++++--------------------
 1 file changed, 24 insertions(+), 39 deletions(-)

diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md
index 4ede9a383..87d0548e4 100644
--- a/docs/source/docs/floats.blade.md
+++ b/docs/source/docs/floats.blade.md
@@ -11,42 +11,27 @@ features:
 
 @include('_partials.work-in-progress')
 
-<div class="border-t border-grey-lighter">
-  <table class="w-full text-left table-collapse">
-    <thead>
-      <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-      </tr>
-    </thead>
-    <tbody class="align-baseline">
-      <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.float-right</td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">float: right;</td>
-        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Moves the element to the right side of its container.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-left</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: left;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Moves the element to the left side of its container.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-none</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: none;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Removes any previously defined float value.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.clearfix</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
-          &amp;:after {<br>
-          &nbsp;&nbsp;content: "";<br>
-          &nbsp;&nbsp;display: table;<br>
-          &nbsp;&nbsp;clear: both;<br>
-          }
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clear any floats within an element.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.float-right',
+      'float: right;',
+      "Moves the element to the right side of its container.",
+    ],
+    [
+      '.float-left',
+      'float: left;',
+      "Moves the element to the left side of its container.",
+    ],
+    [
+      '.float-none',
+      'float: none;',
+      "Removes any previously defined float value.",
+    ],
+    [
+      '.clearfix',
+      "&amp;::after {\n&nbsp;&nbsp;content: \"\";\n&nbsp;&nbsp;display: table;\n&nbsp;&nbsp;clear: both;\n}",
+      "Clear any floats within an element.",
+    ],
+  ]
+])