Created
September 26, 2014 15:08
-
-
Save benhoIIand/66038f2e94d953f52fe4 to your computer and use it in GitHub Desktop.
Inuit.css debug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@if $debug-mode == true{ | |
/*------------------------------------*\ | |
$DEBUG | |
\*------------------------------------*/ | |
/** | |
* Enable this stylesheet to visually detect any improperly nested or | |
* potentially invalid markup, or any potentially inaccessible code. | |
* | |
* Red == definite error | |
* Yellow == double-check | |
* None == should be fine | |
* | |
* Please note that this method of checking markup quality should not be relied | |
* upon entirely. Validate your markup! | |
*/ | |
/** | |
* Are there any empty elements in your page? | |
*/ | |
:empty{ | |
outline:5px solid yellow; | |
} | |
/** | |
* Images require `alt` attributes, empty `alt`s are fine but should be | |
* double-checked, no `alt` is bad and is flagged red. | |
*/ | |
img{ | |
outline:5px solid red; | |
} | |
img[alt]{ | |
outline:none; | |
} | |
img[alt=""]{ | |
outline:5px solid yellow; | |
} | |
/** | |
* Links sometimes, though not always, benefit from `title` attributes. Links | |
* without are never invalid but it’s a good idea to check. | |
*/ | |
a{ | |
outline:5px solid yellow; | |
} | |
a[title]{ | |
outline:none; | |
} | |
/** | |
* Double-check any links whose `href` is something questionable. | |
*/ | |
a[href="#"], | |
a[href*="javascript"]{ | |
outline:5px solid yellow; | |
} | |
/** | |
* The `target` attribute ain’t too nice... | |
*/ | |
a[target]{ | |
outline:5px solid yellow; | |
} | |
/** | |
* Ensure any lists only contain `li`s as children. | |
*/ | |
ul, | |
ol{ | |
> *:not(li){ | |
outline:5px solid red; | |
} | |
} | |
/** | |
* It’s always nice to give `th`s `scope` attributes. | |
*/ | |
th{ | |
outline:5px solid yellow; | |
} | |
th[scope]{ | |
outline:none; | |
} | |
/** | |
* `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? | |
*/ | |
table > tr{ | |
outline:5px solid yellow; | |
} | |
/** | |
* `tfoot` needs to come *before* `tbody`. | |
*/ | |
tbody + tfoot{ | |
outline:5px solid yellow; | |
} | |
/** | |
* Forms require `action` attributes | |
*/ | |
form{ | |
outline:5px solid red; | |
} | |
form[action]{ | |
outline:none; | |
} | |
/** | |
* Various form-field types have required attributes. `input`s need `type` | |
* attributes, `textarea`s need `rows` and `cols` attributes and submit buttons | |
* need a `value` attribute. | |
*/ | |
textarea, | |
input{ | |
outline:5px solid red; | |
} | |
input[type]{ | |
outline:none; | |
} | |
textarea[rows][cols]{ | |
outline:none; | |
} | |
input[type=submit]{ | |
outline:5px solid red; | |
} | |
input[type=submit][value]{ | |
outline:none; | |
} | |
/** | |
* Avoid inline styles where possible. | |
*/ | |
[style]{ | |
outline:5px solid yellow; | |
} | |
/** | |
* You should avoid using IDs for CSS, is this doing any styling? | |
*/ | |
[id]{ | |
outline:5px solid yellow; | |
} | |
/** | |
* Are you using the grid system correctly? | |
*/ | |
.gw > :not(.g), | |
.grid-wrapper > :not(.grid), | |
.gw--rev > :not(.g), | |
.grid-wrapper--rev > :not(.grid){ | |
outline:5px solid red; | |
} | |
}/* endif */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment