Skip Links

sass/_library/_misc.scss

@@ -1,28 +1,7 @@
 /* ----------------------------- */
-/* ==Misc (skip links, hyphens)  */
+/* ==Misc                        */
 /* ----------------------------- */
 
-/* styling skip links */
-.#{$kna-namespace}skip-links {
-  position: absolute;
-
-  & a {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0.5em;
-    background: black;
-    color: white;
-    text-decoration: none;
-
-    &:focus {
-      position: static;
-      overflow: visible;
-      clip: auto;
-    }
-  }
-}
-
 // hyphens on tiny screens
 @media (max-width: ($small - 1)) {
   /* you shall not pass */

sass/components/autogrid.scss

@@ -1,5 +1,8 @@
-/* Autogrid object */
+/* ----------------------------- */
+/* ==Autogrid object             */
+/* ----------------------------- */
 /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
+
 @media (min-width: $small) {
   [class^="autogrid"],
   [class*=" autogrid"] {

sass/components/media.scss

@@ -1,5 +1,8 @@
-/* Media object */
+/* ----------------------------- */
+/* ==Media object                */
+/* ----------------------------- */
 /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
+
 @media (min-width: $small) {
   .o-media {
     display: flex;

sass/components/skip-links.scss

@@ -0,0 +1,25 @@
+/* ----------------------------- */
+/* ==skip links                  */
+/* ----------------------------- */
+/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
+
+/* styling skip links */
+.#{$kna-namespace}skip-links {
+  position: absolute;
+
+  & a {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0.5em;
+    background: black;
+    color: white;
+    text-decoration: none;
+
+    &:focus {
+      position: static;
+      overflow: visible;
+      clip: auto;
+    }
+  }
+}

sass/knacss.scss

@@ -21,6 +21,7 @@
 3- Components :
   - Media object
   - Autogrid object
+  - Skip Links
   - Tables (data tables consistency)
   - Forms (forms consistency)
   - Grillade (Grid System in Flexbox)
@@ -48,6 +49,7 @@
 // Components
 @import "components/media.scss"; // media object
 @import "components/autogrid.scss"; // media autogrid
+@import "components/skip-links.scss"; // skip links
 @import "components/tables.scss"; // data tables consistency
 @import "components/forms.scss"; // forms consistency
 @import "components/grillade.scss"; // grids