Create examples_accessibility_hidden.html

Add new example for new accessibility classes.

Still needs to be finished. :D

doc/includes/visibility/examples_accessibility_hidden.html

@@ -0,0 +1,33 @@
+<div class="row">
+  <div class="large-6 columns">
+  <h4>HTML</h4>
+{{#markdown}}
+```html
+<p class="panel">
+  <strong class="hidden-for-small-only">You are <em>not</em> on a small screen.</strong>
+  <strong class="hidden-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
+  <strong class="hidden-for-medium-only">You are <em>not</em> on a medium screen.</strong>
+  <strong class="hidden-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
+  <strong class="hidden-for-large-only">You are <em>not</em> on a large screen.</strong>
+  <strong class="hidden-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
+  <strong class="hidden-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
+  <strong class="hidden-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
+</p>
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+  <h4>Rendered HTML</h4>
+<p class="panel">
+      <strong class="hidden-for-small-only">You are <em>not</em> on a small screen.</strong>
+      <strong class="hidden-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
+      <strong class="hidden-for-medium-only">You are <em>not</em> on a medium screen.</strong>
+      <strong class="hidden-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
+      <strong class="hidden-for-large-only">You are <em>not</em> on a large screen.</strong>
+      <strong class="hidden-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
+      <strong class="hidden-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
+      <strong class="hidden-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
+</p>
+  </div>
+</div>
+