From 750bd03126ca4878d1a04d754360f6f6727239f0 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 29 Oct 2017 19:47:17 -0400
Subject: [PATCH] Add badges + cheat sheet table to align self docs

---
 .../styles/flexbox/align-content.blade.md     | 10 ++--
 .../styles/flexbox/align-items.blade.md       |  5 ++
 .../source/styles/flexbox/align-self.blade.md | 55 +++++++++++++++++--
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md
index 4972a605b..cf3b89810 100644
--- a/docs/source/styles/flexbox/align-content.blade.md
+++ b/docs/source/styles/flexbox/align-content.blade.md
@@ -19,11 +19,11 @@ category: "Flexbox"
 
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
-      <colgroup>
-        <col class="w-1/5">
-        <col class="w-1/3">
-        <col>
-      </colgroup>
+        <colgroup>
+          <col class="w-1/5">
+          <col class="w-1/3">
+          <col>
+        </colgroup>
         <thead>
           <tr>
               <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md
index 4698e0b4a..4a76bc3ab 100644
--- a/docs/source/styles/flexbox/align-items.blade.md
+++ b/docs/source/styles/flexbox/align-items.blade.md
@@ -32,6 +32,11 @@ category: "Flexbox"
           </tr>
         </thead>
         <tbody class="align-baseline">
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-stretch</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
+            </tr>
             <tr>
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-start;</td>
diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md
index 299a2635f..cb8ac95df 100644
--- a/docs/source/styles/flexbox/align-self.blade.md
+++ b/docs/source/styles/flexbox/align-self.blade.md
@@ -6,17 +6,64 @@ category: "Flexbox"
 
 # Align Self
 
-<div class="text-xl text-slate-light">
+<div class="text-xl text-slate-light mb-4">
     Utilities for controlling how an individual flex item is positioned along its container's cross axis.
 </div>
 
-<div class="subnav">
-    <a class="subnav-link" href="#responsive">Responsive</a>
+@include('_partials.feature-badges', [
+    'responsive' => true,
+    'customizable' => false,
+    'hover' => false,
+    'focus' => false
+])
+
+<div class="border-t border-grey-lighter">
+    <table class="w-full text-left" style="border-collapse: collapse;">
+      <colgroup>
+        <col class="w-1/5">
+        <col class="w-1/3">
+        <col>
+      </colgroup>
+        <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-light font-mono text-xs text-purple-dark">.self-auto</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: auto;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item based on the container's `align-items` property.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-start</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-start;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the start of the cross axis.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-center</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: center;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item along the center of the cross axis.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-end</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-end;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the end of the cross axis.</td>
+            </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-stretch</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: stretch;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch item to fill the cross axis.</td>
+            </tr>
+        </tbody>
+    </table>
 </div>
 
 ### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
 
-Use `.self-auto` to align an item based on the flex container's `align-items` value:
+Use `.self-auto` to align an item based on the value of the flex container's `align-items` property:
 
 @component('_partials.code-sample')
 <div class="flex items-stretch bg-smoke-light h-24">