Created
March 28, 2013 10:00
-
-
Save stryju/5262094 to your computer and use it in GitHub Desktop.
custom normalize - normalize the things you NEED
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
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ | |
/* | |
* usage: | |
* @import "normalize_custom"; | |
* | |
* // this will print out ALL selectors | |
* @include normalize(); | |
* | |
* // this will print out minimal set (*) -- you can see the list of "excluded" tags below | |
* @include normalize( $include : none ); | |
* | |
* // this will print out minimal set + article, but without form ( and anything related to form, like input ) and h1-h6 tags | |
* @include normalize( $include : article, $exclude : form "h*" ); | |
*/ | |
/* | |
* (*) "excluded" in minimal: | |
* - abbr | |
* - article | |
* - aside | |
* - audio | |
* - blockquote | |
* - canvas | |
* - code | |
* - details | |
* - dfn | |
* - fieldset | |
* - figcaption | |
* - figure | |
* - footer | |
* - header | |
* - hgroup | |
* - kdb | |
* - legend | |
* - mark | |
* - menu | |
* - nav | |
* - q | |
* - samp | |
* - section | |
* - small | |
* - sub | |
* - summary | |
* - sup | |
* - svg | |
* - table | |
* - video | |
*/ | |
@function in-list( $value, $list ){ | |
$found : false; | |
@each $item in $list { | |
@if $value == $item { | |
$found : true; | |
} | |
} | |
@return $found; | |
} | |
@mixin if-in-list( | |
$elements, | |
$list, | |
$extend, | |
$is-in-list : true | |
){ | |
@each $element in $elements { | |
$found : false; | |
@if $is-in-list { | |
@if in-list( $element, $list ) { | |
$found : true; | |
} | |
} @else { | |
@if not in-list( $element, $list ) { | |
$found : true; | |
} | |
} | |
@if $found { | |
#{$element} { | |
@extend %#{$extend}; | |
} | |
} | |
} | |
} | |
@mixin normalize( | |
$include : abbr article aside audio blockquote canvas code details dfn fieldset figcaption figure footer header hgroup kdb legend main mark menu nav q samp section small sub summary sup svg table video, | |
$exclude : none | |
){ | |
///// base css placeholders ///// | |
// display: block; | |
%normalize-display-block { | |
display: block; | |
} | |
// display: inline-block; | |
%normalize-display-inline-block { | |
display: inline-block; | |
} | |
// display: none; | |
%normalize-display-none { | |
display: none; | |
} | |
// border: 0; | |
%normalize-border-0 { | |
border: 0; | |
} | |
// font-family: sans-serif; | |
%normalize-font-sans-serif { | |
font-family: sans-serif; | |
} | |
// font-family: monospace; | |
%normalize-font-mono { | |
font-family: monospace, serif; | |
font-size: 1em; | |
} | |
// font-weight: bold; | |
%normalize-font-weight-bold { | |
font-weight: 700; | |
} | |
// outline:0; | |
%normalize-outline-0 { | |
outline: 0; | |
} | |
// line-height: normal; | |
%normalize-line-height-normal { | |
line-height: normal; | |
} | |
// margin: 0; | |
%normalize-margin-0 { | |
margin: 0; | |
} | |
// margin: 1em 0; | |
%normalize-margin-1em-0 { | |
margin: 1em 0; | |
} | |
// padding: 0; | |
%normalize-padding-0 { | |
padding: 0; | |
} | |
// padding: 0 0 0 40px; | |
%normalize-padding-0-0-0-40px { | |
padding: 0 0 0 40px; | |
} | |
// list-style: none; | |
%no-list-style { | |
list-style: none; | |
list-style-image: none; | |
} | |
// cursor: default; | |
%normalize-cursor-default { | |
cursor: default; | |
} | |
///// element placeholders ///// | |
// sup, sub | |
%normalized-sup_sub { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
// pre | |
%normalized-pre { | |
white-space: pre-wrap; | |
} | |
// input, select, button, textarea | |
/* | |
* 1. Correct font family not being inherited in all browsers. | |
* 2. Correct font size not being inherited in all browsers. | |
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. | |
*/ | |
%normalized-inputs { | |
font-family: inherit; /* 1 */ | |
font-size: 100%; /* 2 */ | |
@extend %normalize-margin-0; /* 3 */ | |
} | |
// button, input[type="submit"], input[type="button"] ... | |
/* | |
* 2. Corrects inability to style clickable `input` types in iOS. | |
* 3. Improves usability and consistency of cursor style between image-type | |
* `input` and others. | |
* 4. Removes inner spacing in IE 7 without affecting normal text inputs. | |
* Known issue: inner spacing remains in IE 6. | |
*/ | |
%normalized-button { | |
-webkit-appearance: button; /* 2 */ | |
cursor: pointer; /* 3 */ | |
} | |
// input[type="checkbox"], input[type="radio"] | |
/* | |
* 1. Address box sizing set to `content-box` in IE 8/9. | |
* 2. Remove excess padding in IE 8/9. | |
*/ | |
%normalized-checkable { | |
box-sizing: border-box; /* 1 */ | |
@extend %normalize-padding-0; /* 2 */ | |
} | |
// ::-moz-focus-inner | |
/* | |
* Removes inner padding and border in Firefox 3+. | |
*/ | |
%normalized-moz-focus-inner { | |
@if not in-list( "::-moz-focus-inner", $exclude ) { | |
@extend %normalize-border-0; | |
@extend %normalize-padding-0; | |
} | |
} | |
/* ========================================================================== | |
HTML5 display definitions | |
========================================================================== */ | |
/* | |
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. | |
*/ | |
@include if-in-list( | |
$elements : article aside details figcaption figure footer header hgroup main nav section summary, | |
$list : $include, | |
$extend : normalize-display-block | |
); | |
/* | |
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. | |
*/ | |
@include if-in-list( | |
$elements : audio canvas video, | |
$list : $include, | |
$extend : normalize-display-inline-block | |
); | |
/* | |
* Prevents modern browsers from displaying `audio` without controls. | |
* Remove excess height in iOS 5 devices. | |
*/ | |
@if in-list( audio, $include) and not in-list( 'audio:not[controls]', $exclude ) { | |
audio:not([controls]) { | |
@extend %normalize-display-none; | |
height: 0; | |
} | |
} | |
/* | |
* Address styling not present in IE 8/9. | |
*/ | |
@if not in-list( '[hidden]', $exclude ) { | |
[hidden] { | |
@extend %normalize-display-none; | |
} | |
} | |
/* ========================================================================== | |
Base | |
========================================================================== */ | |
/* | |
* 1. Set default font family to sans-serif. | |
* 2. Prevent iOS text size adjust after orientation change, without disabling | |
* user zoom. | |
*/ | |
@if not in-list( html, $exclude ) { | |
html { | |
@extend %normalize-font-sans-serif; /* 1 */ | |
-webkit-text-size-adjust: 100%; /* 2 */ | |
-ms-text-size-adjust: 100%; /* 2 */ | |
} | |
} | |
/* | |
* Remove default margin. | |
*/ | |
@if not in-list( body, $exclude ) { | |
body { | |
@extend %normalize-margin-0; | |
} | |
} | |
/* ========================================================================== | |
Links | |
========================================================================== */ | |
@if not in-list( a, $exclude ) { | |
a { | |
/* | |
* Addresses `outline` inconsistency between Chrome and other browsers. | |
*/ | |
@if not in-list( 'a:focus', $exclude ){ | |
&:focus { | |
outline: thin dotted; | |
} | |
} | |
/* | |
* Improves readability when focused and also mouse hovered in all browsers. | |
*/ | |
@include if-in-list( | |
$elements : 'a:active' 'a:hover', | |
$list : $exclude, | |
$extend : normalize-outline-0, | |
$is-in-list : false | |
); | |
} | |
} | |
/* ========================================================================== | |
Typography | |
========================================================================== */ | |
/* | |
* Address variable `h1` font-size and margin within `section` and `article` | |
* contexts in Firefox 4+, Safari 5, and Chrome. | |
*/ | |
@if not in-list( h1, $exclude ) { | |
h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
} | |
} | |
/* | |
* Addresses styling not present in IE 8/9, Safari 5, and Chrome. | |
*/ | |
@if in-list( abbr, $include ) { | |
abbr[title] { | |
border-bottom: 1px dotted; | |
} | |
} | |
/* | |
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. | |
*/ | |
@include if-in-list( | |
$elements : b strong, | |
$list : $exclude, | |
$extend : normalize-font-weight-bold, | |
$is-in-list : false | |
); | |
/* | |
* Addresses styling not present in Safari 5 and Chrome. | |
*/ | |
@if in-list( dfn, $include ) { | |
dfn { | |
font-style: italic; | |
} | |
} | |
/* | |
* Address differences between Firefox and other browsers. | |
*/ | |
@if not-in-list( hr, $exclude ) { | |
hr { | |
-moz-box-sizing: content-box; | |
box-sizing: content-box; | |
height: 0; | |
} | |
} | |
/* | |
* Addresses styling not present in IE 8/9. | |
*/ | |
@if in-list( mark, $include ) { | |
mark { | |
background: #ff0; | |
color: #000; | |
} | |
} | |
/* | |
* Addresses margins set differently in IE 6/7. | |
*/ | |
@include if-in-list( | |
$elements : p pre, | |
$list : $exclude, | |
$extend : normalize-margin-1em-0, | |
$is-in-list : false | |
); | |
/* | |
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. | |
*/ | |
@include if-in-list( | |
$elements : code kdb pre samp, | |
$list : $include, | |
$extend : normalize-font-mono | |
); | |
/* | |
* Improves readability of pre-formatted text in all browsers. | |
*/ | |
@if not in-list( pre, $exclude ) { | |
pre { | |
@extend %normalized-pre; | |
} | |
} | |
/* | |
* Set consistent quote types. | |
*/ | |
@if in-list( q, $include ) { | |
q { | |
quotes: "\201C" "\201D" "\2018" "\2019"; | |
} | |
} | |
/* | |
* Address inconsistent and variable font size in all browsers. | |
*/ | |
@if in-list( small, $include ) { | |
small { | |
font-size: 80%; | |
} | |
} | |
/* | |
* Prevents `sub` and `sup` affecting `line-height` in all browsers. | |
*/ | |
@if in-list( sup, $include ) { | |
sup { | |
@extend %normalized-sup_sub; | |
top: -0.5em; | |
} | |
} | |
@if in-list( sub, $include ) { | |
sub { | |
@extend %normalized-sup_sub; | |
bottom: -0.25em; | |
} | |
} | |
/* ========================================================================== | |
Embedded content | |
========================================================================== */ | |
/* | |
* Remove border when inside `a` element in IE 8/9. | |
*/ | |
@if not in-list( img, $exclude ) { | |
img { | |
@extend %normalize-border-0; | |
} | |
} | |
/* | |
* Corrects overflow displayed oddly in IE 9. | |
*/ | |
@if in-list( svg, $include) { | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
} | |
/* ========================================================================== | |
Figures | |
========================================================================== */ | |
/* | |
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. | |
*/ | |
@if in-list( figure, $include ) { | |
figure { | |
@extend %normalize-margin-0; | |
} | |
} | |
/* ========================================================================== | |
Forms | |
========================================================================== */ | |
@if not in-list( form, $exclude ) { | |
/* | |
* Define consistent border, margin, and padding. | |
*/ | |
@if in-list( fieldset, $include ) { | |
fieldset { | |
border: 1px solid #c0c0c0; | |
margin: 0 2px; | |
padding: 0.35em 0.625em 0.75em; | |
} | |
/* | |
* 1. Correct `color` not being inherited in IE 8/9. | |
* 2. Remove padding so people aren't caught out if they zero out fieldsets. | |
*/ | |
@if in-list( legend, $include ) { | |
legend { | |
@extend %normalize-border-0; /* 1 */ | |
@extend %normalize-padding-0; /* 2 */ | |
} | |
} | |
} | |
@include if-in-list( | |
$elements : button input select textarea, | |
$list : $exclude, | |
$extend : normalized-inputs, | |
$is-in-list : false | |
); | |
/* | |
* Address Firefox 4+ setting `line-height` on `input` using `!important` in | |
* the UA stylesheet. | |
*/ | |
@include if-in-list( | |
$elements : button input, | |
$list : $exclude, | |
$extend : normalize-line-height-normal, | |
$is-in-list : false | |
); | |
/* | |
* Re-set default cursor for disabled elements. | |
*/ | |
@if not in-list( button, $exclude ) { | |
button { | |
@extend %normalized-button; | |
&::-moz-focus-inner { | |
@extend %normalized-moz-focus-inner; | |
} | |
@if not in-list( "[disabled]", $exclude ) and not in-list( "button[disabled]", $exclude ) { | |
&[disabled] { | |
@extend %normalize-cursor-default; | |
} | |
} | |
} | |
} | |
@if not in-list( "input", $exclude ) { | |
input { | |
@extend %normalize-line-height-normal; | |
&::-moz-focus-inner { | |
@extend %normalized-moz-focus-inner; | |
} | |
@if not in-list( "[disabled]", $exclude ) and not in-list( "input[disabled]", $exclude ) { | |
&[disabled] { | |
@extend %normalize-cursor-default; | |
} | |
} | |
} | |
@if not in-list( "[type]", $exclude ) and not in-list( "input[type]", $exclude ) { | |
/* | |
* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
* and `video` controls. | |
*/ | |
@if not in-list( 'input[type="button"]', $exclude ) { | |
html input[type="button"] { | |
@extend %normalized-button; | |
} | |
} | |
@include if-in-list( | |
$elements : 'input[type="reset"]' 'input[type="submit"]', | |
$list : $exclude, | |
$extend : normalized-button, | |
$is-in-list : false | |
); | |
/* | |
* 1. Addresses box sizing set to content-box in IE 8/9. | |
* 2. Removes excess padding in IE 8/9. | |
* 3. Removes excess padding in IE 7. | |
* Known issue: excess padding remains in IE 6. | |
*/ | |
@if not in-list( ":checkable", $exclude ) { | |
@include if-in-list( | |
$elements : 'input[type="checkbox"]' 'input[type="radio"]', | |
$list : $exclude, | |
$extend : normalized-checkable, | |
$is-in-list : false | |
); | |
} | |
/* | |
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. | |
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome | |
* (include `-moz` to future-proof). | |
*/ | |
@if not in-list( 'input[type="search"]', $exclude ) { | |
input[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; /* 2 */ | |
box-sizing: content-box; | |
/* | |
* Removes inner padding and search cancel button in Safari 5 and Chrome | |
* on OS X. | |
*/ | |
&::-webkit-search-cancel-button, | |
&::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
} | |
} | |
} | |
} | |
/* | |
* 1. Removes default vertical scrollbar in IE 6/7/8/9. | |
* 2. Improves readability and alignment in all browsers. | |
*/ | |
@if not in-list( textarea, $exclude ) { | |
textarea { | |
overflow: auto; /* 1 */ | |
vertical-align: top; /* 2 */ | |
} | |
} | |
} | |
/* ========================================================================== | |
Tables | |
========================================================================== */ | |
/* | |
* Remove most spacing between table cells. | |
*/ | |
@if in-list( table, $include ) { | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment