Merge pull request #12 from Beg-in/sb0stn-master

Sb0stn Screen Reader Classes

dist/frow.css

@@ -2484,3 +2484,15 @@ textarea {
     display: block !important; }
   .frow.visible-print {
     display: flex !important; } }
+
+.visible-sr,
+.visible-sr-focusable:not(:focus) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important; }

docs/styles/frow.css

@@ -2485,3 +2485,15 @@ textarea {
     display: block !important; }
   .frow.visible-print {
     display: flex !important; } }
+
+.visible-sr,
+.visible-sr-focusable:not(:focus) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important; }

docs/utilities.html

@@ -321,6 +321,25 @@ <h5 id="media-print-shortcuts">
 <!--       -->
 <!--       --><span class="fake-comment">// This element would only appear when printed out</span>
 <!--       --><span>&lt;div class="visible-print"&gt;&lt;/div&gt;</span>
+<!--     --></pre>
+            <h5 id="accessibility-shortcuts">
+              <a href="#accessibility-shortcuts">
+                Accessibility Shortcuts
+              </a>
+            </h5>
+            <p>
+              Use these pre-made rules to create elements that only screenreader users can see. 
+            </p>
+            <pre class="fake-code bottom-margin">
+<!--       --><span class="fake-comment">// .visible-sr and .visible-sr-focusable</span>
+<!--       -->
+<!--       --><span class="fake-comment">// Visually hidden element which is still accessible to users with a screenreader</span>
+<!--       --><span class="fake-comment">// This can be used to give context to elements, such as a "Read more" button</span>
+<!--       -->&lt;a&gt;Read more &lt;span class="visible-sr"&gt;about this news article&lt;/span&gt;&lt;/a&gt;
+<!--       -->
+<!--       --><span class="fake-comment">// Similiar to .visible-sr, but this element will become visible when it receives focus from the user</span>
+<!--       --><span class="fake-comment">// This can be used for things like "Skip to content" links at the top of the page</span>
+<!--       -->&lt;a class="visible-sr-focusable"&gt;Skip to main content&lt;/a&gt;
 <!--     --></pre>
           </div>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frow",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "description": "Flexbox Toolkit & Grid",
   "main": "frow.sass",
   "scripts": {

src/_utilities.sass

@@ -108,7 +108,7 @@
   .grow-0
     flex-grow: 0 !important
 
-  .grow-1 
+  .grow-1
     flex-grow: 1 !important
 
   // Cursor pointer classes
@@ -172,4 +172,18 @@
       display: block !important
 
     .frow.visible-print
-      display: flex !important
+      display: flex !important
+
+  // Accessibility rules
+  // -------------------------
+  .visible-sr,
+  .visible-sr-focusable:not(:focus)
+    position: absolute !important
+    width: 1px !important
+    height: 1px !important
+    padding: 0 !important
+    margin: -1px !important
+    overflow: hidden !important
+    clip: rect(0, 0, 0, 0) !important
+    white-space: nowrap !important
+    border: 0 !important