diff --git a/CHANGELOG.md b/CHANGELOG.md index a41cff88..53949c7e 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index a593a392..d47d954c 100644 --- a/README.md +++ b/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? diff --git a/_defaults.scss b/_defaults.scss index be2b5af9..07bf63a9 100644 --- a/_defaults.scss +++ b/_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; + /*------------------------------------*\ diff --git a/component.json b/bower.json similarity index 68% rename from component.json rename to bower.json index ae1034ff..d746826d 100644 --- a/component.json +++ b/bower.json @@ -1,5 +1,5 @@ { "name": "inuit.css", - "version": "5.0.0", + "version": "5.0.1", "dependencies": {} } diff --git a/generic/_mixins.scss b/generic/_mixins.scss index aef0bc10..42fc5d36 100644 --- a/generic/_mixins.scss +++ b/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; + } } } } diff --git a/generic/_normalize.scss b/generic/_normalize.scss index 714c6b96..de3f0e53 100644 --- a/generic/_normalize.scss +++ b/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(); } /* ========================================================================== diff --git a/generic/_reset.scss b/generic/_reset.scss index 1d91a299..b4bf377d 100644 --- a/generic/_reset.scss +++ b/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(); } diff --git a/objects/_beautons.scss b/objects/_beautons.scss index 77f25b4d..f9df8c6e 100644 --- a/objects/_beautons.scss +++ b/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] */ } }