Create examples_accessibility_visible.html

Add new docs for new accessibility classes.

Still needs finishing. :D

doc/includes/visibility/examples_accessibility_visible.html

@@ -0,0 +1,33 @@
+<div class="row">
+  <div class="large-6 columns">
+  <h4>HTML</h4>
+  {{#markdown}}
+  ```html
+<p class="panel">
+  <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
+  <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
+  <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
+  <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
+  <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
+  <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
+  <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
+  <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
+</p>
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+<p class="panel">
+      <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
+      <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
+      <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
+      <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
+      <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
+      <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
+      <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
+      <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
+    </p>
+  </div>
+</div>
+