add stubby OS & browser compatibility table to docs

2 files changed, 72 insertions, 0 deletions

diff --git a/docs/getting-started.html b/docs/getting-started.html
index db70a79..4183bc3 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -177,6 +177,61 @@ ratchet/
         </ol>
         <p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
       </div>
+
+      <div class="docs-section">
+        <h2>Browser and OS support</h2>
+        <table class="browser-support-table">
+          <thead>
+            <tr>
+              <th scope="col">OS</th>
+              <th scope="col">Browser</th>
+              <th scope="col" class="text-center">Supported?</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Android (minimum version To Be Decided)</td>
+              <td>Android stock Browser</td>
+              <td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
+            </tr>
+            <tr>
+              <td>Android (minimum version To Be Decided)</td>
+              <td>Chrome</td>
+              <td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
+            </tr>
+            <tr>
+              <td>Android (minimum version To Be Decided)</td>
+              <td>Firefox</td>
+              <td class="text-center browser-support-maybe">To Be Decided</td>
+            </tr>
+            <tr>
+              <td>iOS v7.1+</td>
+              <td>Safari</td>
+              <td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
+            </tr>
+            <tr>
+              <td>iOS v7.1+</td>
+              <td>Chrome</td>
+              <td class="text-center browser-support-maybe">To Be Decided</td>
+            </tr>
+            <tr>
+              <td>Windows Phone</td>
+              <td>IE Mobile</td>
+              <td class="text-center browser-support-maybe">To Be Decided</td>
+            </tr>
+            <tr>
+              <td>&mdash;</td>
+              <td>Opera Mini</td>
+              <td class="text-center browser-support-maybe">To Be Decided</td>
+            </tr>
+            <tr>
+              <td>&mdash;</td>
+              <td>Opera Mobile</td>
+              <td class="text-center browser-support-maybe">To Be Decided</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
 
     <div class="column lg-units-4">
diff --git a/sass/docs.scss b/sass/docs.scss
index dd4186a..2cd47ce 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -1137,3 +1137,20 @@ hr {
   width: 121px;
   height: 20px;
 }
+
+// Browser support table
+.browser-support-table td,
+.browser-support-table th {
+  border: 1px solid #ddd;
+  padding: 5px;
+}
+.browser-support-maybe {
+  color: #fff;
+  background-color: #f0ad4e;
+}
+.browser-support-yes {
+  background-color: $positive-color;
+}
+.browser-support-no {
+  background-color: $negative-color;
+}