Feature/a11y

CHANGELOG.md

@@ -3,7 +3,7 @@
 This changelog only exists as of v5.0 onward, for previous inuit.css versions’
 history please browse the commit logs.
 
-## v5.0
+## v5.0.0
 
 This major version bump saw the introduction of the
 [inuit.css web template](https://github.com/csswizardry/inuit.css-web-template),
@@ -18,3 +18,9 @@ updates from GitHub whilst avoiding having to touch any library code.
   classes.
 * Added a few more helper classes and mixins.
 * Introduced switches to turn objects and abstractions on/off.
+
+## v5.1.1
+
+* Convert special character to unicode.
+* Fix/change the `headings` mixin.
+* Fix some typos pertaining to the renaming of the spriting object.

README.md

@@ -31,7 +31,7 @@ _lot_ more.
 **Do not use inuit.css if:**
 
 * You need a framework that supplies design (I’d recommend
-  [Bootstrap](http://twitter.github.com/bootstrap/) for that).
+  [Bootstrap](http://getbootstrap.com) for that).
 
 ## Browser support
 
@@ -307,8 +307,9 @@ at the [inuit.css Trello board](https://trello.com/board/inuit-css/50a16487543de
 
 ## Looking for a little LESS?
 
-[Peter Wilson](http://twitter.com/pwcc) is maintaining a LESS port of inuit.css:
-check [the GitHub repo](https://github.com/peterwilsoncc/inuit.css).
+[Peter Wilson](http://twitter.com/pwcc) and
+[Nicolas Carlo](https://twitter.com/nicoespeon) are maintaining a LESS port of
+inuit.css: check [the GitHub repo](https://github.com/peterwilsoncc/inuit.css).
 
 ## Using Compass?
 

_defaults.scss

@@ -21,6 +21,15 @@ $debug-mode:        false!default;
 
 
 
+/*------------------------------------*\
+    $A11Y
+\*------------------------------------*/
+/**
+ * This mode provide accessibility requirements
+ * Check http://www.w3.org/WAI/intro/wcag
+ */
+$a11y-mode:        false!default;
+
 
 
 /*------------------------------------*\

component.json → bower.json

@@ -1,5 +1,5 @@
 {
     "name": "inuit.css",
-    "version": "5.0.0",
+    "version": "5.0.1",
     "dependencies": {}
 }

generic/_mixins.scss

@@ -19,6 +19,22 @@
 }
 
 
+/**
+ * Set outline:none if you don't care about people with disabilities
+ * Use $a11y-mode default variable
+ *
+   `@include outline-none();`
+ *
+ * Manifest http://www.outlinenone.com/
+ * WCAG2.0 level AA: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible
+ */
+@mixin outline-none(){
+    @if $a11y-mode == false{
+        outline: none;
+    }
+}
+
+
 /**
  * Style any number of headings in one fell swoop, e.g.:
  *
@@ -28,17 +44,19 @@
        }
     }
  *
- * With thanks to @lar_zzz, @paranoida and @rowanmanning for refining and
- * improving my initial mixin.
+ * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
+ * @thierrylemoulec for refining and improving my initial mixin.
  */
 @mixin headings($from: 1, $to: 6){
+    %base-heading {
+        @content
+    }
+
     @if $from >= 1 and $to <= 6{
-        $heading-selector: (unquote(""));
-        @for $i from $from through $to {
-            $heading-selector: $heading-selector, unquote("h#{$i}")
-        }
-        #{$heading-selector}{
-            @content
+        @for $i from $from through $to{
+            h#{$i}{
+                @extend %base-heading;
+            }
         }
     }
 }

generic/_normalize.scss

@@ -89,11 +89,12 @@ a:focus {
 
 /*
  * Improve readability when focused and also mouse hovered in all browsers.
+ * This is conditionned by outline-none() mixin and $a11y-mode default var.
  */
 
 a:active,
 a:hover {
-    outline: 0;
+    @include outline-none();
 }
 
 /* ==========================================================================

generic/_reset.scss

@@ -62,6 +62,7 @@ img{
 
 /**
  * Give form elements some cursor interactions...
+ * Use outline-none() a11y mixin on active, focus states of form elems.
  */
 label,
 input,
@@ -76,5 +77,5 @@ option{
     textarea:active,
     textarea:focus{
         cursor:text;
-        outline:none;
+        @include outline-none();
     }

objects/_beautons.scss

@@ -41,45 +41,46 @@
 /**
  * Base button styles.
  *
- * 1. Allow us to better style box model properties.
- * 2. Line different sized buttons up a little nicer.
- * 3. Stop buttons wrapping and looking broken.
- * 4. Make buttons inherit font styles.
- * 5. Force all elements using beautons to appear clickable.
- * 6. Normalise box model styles.
- * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
- *    there is 1em of space above and below that text. We therefore apply 1em
- *    of space to the left and right, as padding, to keep consistent spacing.
- * 8. Basic cosmetics for default buttons. Change or override at will.
- * 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
+ * 1.  Allow us to better style box model properties.
+ * 2.  Line different sized buttons up a little nicer.
+ * 3.  Stop buttons wrapping and looking broken.
+ * 4.  Make buttons inherit font styles.
+ * 5.  Force all elements using beautons to appear clickable.
+ * 6.  Normalise box model styles.
+ * 7.  If the button’s text is 1em, and the button is (3 * font-size) tall, then
+ *     there is 1em of space above and below that text. We therefore apply 1em
+ *     of space to the left and right, as padding, to keep consistent spacing.
+ * 8.  Basic cosmetics for default buttons. Change or override at will.
+ * 9.  Don’t allow buttons to have underlines; it kinda ruins the illusion.
+ * 10. Apply outline:none if $a11y-mode default variable is false.
  */
 .btn{
-    display:inline-block;       /* [1] */
-    vertical-align:middle;      /* [2] */
-    white-space:nowrap;         /* [3] */
-    font-family:inherit;        /* [4] */
-    font-size:100%;             /* [4] */
-    cursor:pointer;             /* [5] */
-    border:none;                /* [6] */
-    margin:0;                   /* [6] */
-    padding-top:   0;           /* [6] */
-    padding-bottom:0;           /* [6] */
-    line-height:3;              /* [7] */
-    padding-right:1em;          /* [7] */
-    padding-left: 1em;          /* [7] */
-    border-radius:$brand-round; /* [8] */
+    display:inline-block;        /* [1] */
+    vertical-align:middle;       /* [2] */
+    white-space:nowrap;          /* [3] */
+    font-family:inherit;         /* [4] */
+    font-size:100%;              /* [4] */
+    cursor:pointer;              /* [5] */
+    border:none;                 /* [6] */
+    margin:0;                    /* [6] */
+    padding-top:   0;            /* [6] */
+    padding-bottom:0;            /* [6] */
+    line-height:3;               /* [7] */
+    padding-right:1em;           /* [7] */
+    padding-left: 1em;           /* [7] */
+    border-radius:$brand-round;  /* [8] */
 }
 
 .btn{
 
     &,
     &:hover{
-        text-decoration:none;   /* [9] */
+        text-decoration:none;    /* [9] */
     }
 
     &:active,
     &:focus{
-        outline:none;
+        @include outline-none(); /* [10] */
     }
 }