Merge pull request #698 from twbs/compat-docs

add stubby OS & browser compatibility table to docs

docs/assets/css/docs.css

@@ -2069,3 +2069,22 @@ hr {
   height: 20px;
   margin-top: 6px;
 }
+
+.browser-support-table td,
+.browser-support-table th {
+  padding: 5px;
+  border: 1px solid #ddd;
+}
+
+.browser-support-maybe {
+  color: #fff;
+  background-color: #f0ad4e;
+}
+
+.browser-support-yes {
+  background-color: #9c0;
+}
+
+.browser-support-no {
+  background-color: #f44;
+}

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">

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;
+}