mgeorgehansen/total-reset.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate existing code to repo

Browse source
This commit is contained in:
M. George Hansen 2016-11-03 15:58:14 -07:00
parent b6c6217bf6
commit 50503a421d
Signed by: mgeorgehansen
SSH key fingerprint: SHA256:JlIGiQLPyQ2RHTH3a2oVlb20Xkh9Glr8DUF4YTXHJxM
19 changed files with 1451 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

92
README.md
View file

@ -1,2 +1,92 @@
# total-reset.css
A CSS reset that goes all the way
> A semantic CSS reset that goes all the way.
total-reset.css takes the cross-browser fixes from the venerable normalize.css
but removes all of the opinionated base element styling, sets _all elements_ to
`display: block` and `box-sizing: border-box`, and generally tries to provide a
sane, unstyled default to every HTML element.
*Note:* total-reset.css follows semantic versioning and as donated by the 0.x.y
version is still in active development, so please test it before deploying to a
production site! If you do find a bug or want to suggest an enchancement, please
file an [issue](https://github.com/mgeorgehansen/total-reset.css/issues).
## Supported Browsers
total-reset.css supports the latest 2 browser releases for the following major
browsers:
* IE/Edge
* Firefox
* Chrome
* Safari
## What Total Reset Does
### Normalizes Styling and Fixes Bugs Across Different Browsers
Many elements have slightly different default styles on different browsers,
and some browsers have subtle styling or user experience bugs. total-reset.css
tries to normalize those styles to a sane default and fix these bugs. Many of
these fixes are taken from [normalize.css](https://github.com/necolas/normalize.css/),
so full credit to [Nicolas Gallagher](https://github.com/necolas),
[Jonathan Neal](https://github.com/jonathantneal) and the other normalize.css
contributors.
### Sets `box-sizing: border-box` on All Elements
Border-box sizing is much more intuative to use than content-box in most cases
and encapsulates the padding and border in the element being styled, leading to
more modular components.
total-reset.css uses Jon Neal's inherit-based [box-sizing reset method](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/).
### Sets `display: block` on All Elements
Inline vs inline-block vs block display is a visual layout style that has
nothing to do with the semantic meaning of the markup, so it makes little sense
to have some elements display block and others display inline because those
elements might be styled differently in different contexts.
Most elements are already block display and block display tends to have the
least-surprising layout behavior, so the default for all elements is set to
`display: block`.
The only exception to this rule is checkboxes and radios since most browsers
don't allow changing the display of those elements.
### Sets Inheritable Properties to `inherit`
Many CSS properties, such as `font-size`, `text-align`, etc. are inhertiable,
meaning that if an element does not specify the value of the property (or
specifies a value of `inherit`) it will inherit the property value from its
closest ancenstor which explicitly sets the property value.
total-reset.css tries support this property inheritance behavior where possible
and sets inheritable properties to `inherit` for elements that have explicit
values set by the browser.
## Why Not Just Use normalize.css?
normalize.css is great if you need a quick basis for your theme that you know is
reliable across different browers. But as your website or webapp grows you'll
quickly find that the global, opinionated base styles that normalize.css
provides get in the way of writing semantic, modular HTML.
The major problem with default element styles is that it ties styling to
semantic meaning which makes reusing those styles in different contexts
difficult and encourages web developers to write unsemantic HTML. How many times
have you had to override `color`, `text-decoration` and hover states on a
wrapper `<a>`? Or had a web developer use multiple `<h1>` tags on a page because they had the largest `font-size`? These are all symptoms of tying your styling
to your semantics.
## Credits
* [Nicolas Gallagher](https://github.com/necolas),
[Jonathan Neal](https://github.com/jonathantneal) and all of the normalize.css
contributors for their amazing work on normalize.css which total-reset.css
borrows from heavily.
* [Chris Bracco](https://github.com/cbracco) for his excellent
[html5-test-page](https://github.com/cbracco/html5-test-page), which was used
to test all of the reset styles for total-reset.css.

17
bower.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "total-reset",
"version": "0.1.0",
"description": "A semantic CSS reset that goes all the way.",
"main": "dist/total-reset.css",
"authors": [
"M. George Hansen <technopolitica@gmail.com>"
],
"license": "MPL-2.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

387
dist/full-reset.css vendored Normal file
View file

@ -0,0 +1,387 @@
/**
* 1. Set all visible elements with default inline, inline-block and block to
* display as blocks.
*
* This might be controversial, but my position is that inline vs block
* display is a visual style and that block display is the most reasonable
* default for consistent styling. Rather than maintaining a mental map of
* which elements are _supposed_ to be inline vs block you can always rely
* on the fact that *all* elements are block by default. Except checkboxes
* and radios of course, because reasons.
*/
button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea {
display: block; }
/**
* 1. Reset box-sizing on all elements to border-box.
*
* This uses Jon Neal's method of setting the default box-sizing on the root
* html element and then having all other elements inherit box-sizing
* (https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/).
* This method seems to cause the least number of headaches and override
* issues.
*/
html {
box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit; }
/**
* 1. Fully reset link styling.
* 2. Remove gray background color from active links in IE 10
* (from normalize.css).
*/
a {
color: inherit;
text-decoration: none;
background-color: transparent; }
a:link, a:active, a:visited {
color: inherit; }
ul, ol {
margin: 0;
padding: 0;
list-style-type: none; }
ul ol, ul ul, ol ol, ol ul {
padding: 0; }
/**
* 1. Prevent iOS and IE text size adjust after device orientation change
* without disabling user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
/**
* 1. Remove all styling from `h1-6` elements.
*/
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: inherit;
font-weight: inherit; }
/**
* 1. Remove extra margin around these elements.
*/
p, dl, dd, pre, figure, blockquote {
margin: 0; }
/**
* 1. Ensure that these elements inherit font-style.
*/
i, cite, em, var, address, dfn {
font-style: inherit; }
/**
* 1. Ensure that these elements inherit text-decoration.
*/
u, s, strike, del, ins {
text-decoration: inherit; }
/**
* 1. Ensure that these elements inherit font-weight.
*/
dfn, strong, th, b {
font-weight: inherit; }
small {
font-size: inherit; }
/**
* 1. Ensure that font-family is inherited.
* 2. Inherit font size in IE.
*/
tt, code, kbd, samp, pre {
font-family: inherit;
font-size: inherit; }
/**
* 1. Remove quotation marks.
*/
q::before, q::after {
content: "";
content: none; }
blockquote, q {
quotes: none; }
/**
* 1. Reset styling for `mark` elements.
*/
mark {
background-color: inherit;
color: inherit; }
hr {
box-sizing: content-box;
height: 0; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers
* (from normalize.css).
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/**
* 1. Remove border when inside `a` element in IE 9/10 (from normalize.css).
*
* Note: We don't use a parent `a` because it causes the selector to have
* high specificity and makes it difficult to override. `img` shouldn't
* have borders anyway, so no harm no foul.
*/
img {
border: none; }
/**
* 1. Remove borders from iframes. This isn't 1995 any more.
*/
iframe {
border: none; }
/**
* 1. Prevent modern browsers from displaying `audio` without controls.
* 2. Remove excess height in iOS 5 devices (from normalize.css).
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Correct overflow not hidden in IE 9/10/11 (from normalize.css).
*/
svg:not(:root) {
overflow: hidden; }
/**
* 1. Remove the outline on focused elements that all major browers add.
*
* Ok, this is going to be *super* controversial but hear me out. Yes,
* accessability on focusable elements is really important and needs to be
* addressed in any design, but the default styling may not work for every
* design. For instance, a site with lots of grays would make the default
* focus outline difficult to see. Rather than try to guess what the best
* focus indicator should be for every design I argue that this is the
* responsibility of the designer to figure out. There is an argument to be
* made for standard and expected behavior, but it is easy enough to add
* a focus outline back in the application styling if that's what you want.
*/
:focus {
outline: none; }
/**
* 1. Remove the underline that Firefox adds to elements with a title.
*
* Again, this might be controversal but see the comments on :focus above.
*/
[title] {
text-decoration: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
td, th {
padding: 0; }
caption {
text-align: inherit; }
html {
width: 100%;
overflow-x: hidden; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress {
width: 100%; }
img, video, object, embed, iframe {
height: auto;
max-width: 100%; }
audio {
max-width: 100%; }
/**
* 1. Fully reset fieldsets removing all default styling.
*/
fieldset {
margin: 0;
padding: 0;
border: none; }
/**
* 1. Fully reset lengends removing all default styling.
* 2. On Android Chrome browser lengends don't expand to 100%, so we fix that.
*/
legend {
border: 0;
padding: 0;
width: 100%; }
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
input:not([type="checkbox"]):not([type="radio"]),
optgroup,
select,
textarea,
button {
margin: 0;
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit; }
/**
* 1. Remove border-radius in Safari.
* 2. Remove glossy background in Safari.
*
* Note that this also removes the dropdown arrow in Safari, which isn't
* ideal but there is little we can do about it.
*/
select {
border-radius: 0;
-webkit-appearance: none; }
/**
* Remove default vertical scrollbar in IE 8/9/10/11 (from normalize.css).
*/
textarea {
overflow: auto; }
/**
* 1. Address `overflow` set to `hidden` in IE 8/9/10/11 (from normalize.css).
*/
button {
overflow: visible; }
/**
* 1. Address inconsistent `text-transform` inheritance for `button` and
* `select`. All other form control elements do not inherit `text-transform`
* values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and
* Opera. Correct `select` style inheritance in Firefox
* (from normalize.css).
*/
button,
select {
text-transform: none; }
/**
* 1. Remove inner padding and border in Firefox 4+ (from normalize.css).
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: button;
cursor: pointer;
text-align: left; }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal; }
/**
* Checkboxes and radio inputs are not styleable in most browsers unfortunately,
* so we have to treat them as a special case.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10 (from normalize.css).
* 2. Remove excess padding in IE 8/9/10 (from normalize.css).
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0; }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome which is
* unstylable (from normalize.css).
* 2. Remove inner padding and search cancel button in Safari and Chrome on
* OS X. Safari (but not Chrome) clips the cancel button when the search
* input has padding (and `textfield` appearance) (from normalize.css).
*
* Ideally we'd like to support the native cancel button, but unfortunately
* safar
*
*/
input[type="search"] {
-webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Update input placeholders to inherit color (IE, Chrome and Safari) and
* opacity (Firefox).
*
* Note: On Firefox number inputs do not respect placeholder styling. This is
* a known bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1004130) with no
* workaround :(.
*/
::-webkit-input-placeholder {
color: inherit; }
::-moz-placeholder {
opacity: inherit; }
:-ms-input-placeholder {
color: inherit; }
/**
* 1. Address `[hidden]` styling not present in IE 8/9/10 and hide the
* `template` element in IE 8/9/10/11, Safari, and Firefox < 22
* (from normalize.css).
*/
[hidden],
template {
display: none; }
/**
* 1. Remove default padding on body.
* 2. Normalize line-height.
*/
body {
margin: 0;
line-height: 1; }

1
dist/full-reset.min.css vendored Normal file
View file

@ -0,0 +1 @@
b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:inherit}h1,h2,h3,h4,h5,h6,small{font-size:inherit}[title],a{text-decoration:none}button,html,input:not([type=checkbox]):not([type=radio]),legend,meter,progress,select,textarea{width:100%}fieldset,iframe,img{border:none}a,a:active,a:link,a:visited,mark{color:inherit}button,datalist,fieldset,form,input:not([type=checkbox]):not([type=radio]),keygen,label,output,select,textarea{display:block}html{box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-x:hidden}*,::after,::before{box-sizing:inherit}a{background-color:transparent}ol,ul{margin:0;padding:0;list-style-type:none}ol ol,ol ul,td,th,ul ol,ul ul{padding:0}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}address,cite,dfn,em,i,var{font-style:inherit}del,ins,s,strike,u{text-decoration:inherit}code,kbd,pre,samp,tt{font-family:inherit;font-size:inherit}q::after,q::before{content:"";content:none}blockquote,q{quotes:none}mark{background-color:inherit}hr{box-sizing:content-box;height:0}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}:focus{outline:0}table{border-collapse:collapse;border-spacing:0}caption{text-align:inherit}embed,iframe,img,object,video{height:auto;max-width:100%}audio{max-width:100%}fieldset{margin:0;padding:0}legend{border:0;padding:0}button,input:not([type=checkbox]):not([type=radio]),optgroup,select,textarea{margin:0;padding:0;border:none;background:0 0;font:inherit;color:inherit}select{border-radius:0;-webkit-appearance:none}textarea{overflow:auto}button{overflow:visible}button,select{text-transform:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button,html input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:button;cursor:pointer;text-align:left}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit}::-moz-placeholder{opacity:inherit}:-ms-input-placeholder{color:inherit}[hidden],template{display:none}body{margin:0;line-height:1}

38
gulpfile.js Normal file
View file

@ -0,0 +1,38 @@
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var gulpMinifyCss = require('gulp-minify-css');
var gulpSass = require('gulp-sass');
var gulpRename = require('gulp-rename');
var gulpIgnore = require('gulp-ignore');
var distDir = 'dist';
var srcDir = 'src';
gulp.task('build', function() {
return gulp.src(srcDir + '/**/[^_]*.sass')
.pipe(gulpSass()).on('error', gulpSass.logError)
.pipe(gulp.dest(distDir))
.pipe(browserSync.stream())
.pipe(gulpMinifyCss())
.pipe(gulpRename({
extname: '.min.css'
}))
.pipe(gulp.dest(distDir));
});
gulp.task('serve', ['build'], function() {
browserSync.init({
server: {
baseDir: 'test',
routes: {
'/dist': 'dist'
},
},
open: false,
});
gulp.watch('test/**/*.html').on('change', browserSync.reload);
gulp.watch(srcDir + '/**/*.sass', ['build']);
});
gulp.task('default', ['build'])

26
package.json Normal file
View file

@ -0,0 +1,26 @@
{
"name": "total-reset",
"version": "0.1.0",
"description": "A semantic CSS reset that goes all the way.",
"keywords": [
"css",
"reset"
],
"main": "dist/total-reset.css",
"scripts": {
"prebuild": "npm install",
"build": "gulp build",
"serve": "npm run prebuild && gulp serve"
},
"author": "M. George Hansen <technopolitica@gmail.com>",
"license": "MPL-2.0",
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-ignore": "^2.0.1",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0"
}
}

23
src/_accessibility.sass Normal file
View file

@ -0,0 +1,23 @@
/**
* 1. Remove the outline on focused elements that all major browers add.
*
* Ok, this is going to be *super* controversial but hear me out. Yes,
* accessability on focusable elements is really important and needs to be
* addressed in any design, but the default styling may not work for every
* design. For instance, a site with lots of grays would make the default
* focus outline difficult to see. Rather than try to guess what the best
* focus indicator should be for every design I argue that this is the
* responsibility of the designer to figure out. There is an argument to be
* made for standard and expected behavior, but it is easy enough to add
* a focus outline back in the application styling if that's what you want.
*/
:focus
outline: none /* 1 */
/**
* 1. Remove the underline that Firefox adds to elements with a title.
*
* Again, this might be controversal but see the comments on :focus above.
*/
[title]
text-decoration: none /* 1 */

20
src/_blocks.sass Normal file
View file

@ -0,0 +1,20 @@
/**
* 1. Set all visible elements with default inline, inline-block and block to
* display as blocks.
*
* This might be controversial, but my position is that inline vs block
* display is a visual style and that block display is the most reasonable
* default for consistent styling. Rather than maintaining a mental map of
* which elements are _supposed_ to be inline vs block you can always rely
* on the fact that *all* elements are block by default. Except checkboxes
* and radios of course, because reasons.
*/
article, aside, div, footer, header, hgroup, main, menu, nav, noscript, section, /* structural elements */
abbr, acronym, blockquote, h1, h2, h3, h4, h5, h6, p, q, /* phrasing elements */
b, bdo, em, i, ins, hr, mark, pre, s, small, strike, strong, sub, sup, u, wbr, /* typographic elements */
a, address, cite, code, dd, dfn, dl, dt, figcaption, figure, kbd, ol, ul, samp, time, var, /* data markup elements */
rp, rt, ruby, /* language elements */
details, meter, progress, summary, /* interactive elements */
audio, canvas, embed, img, svg, video, /* embedded content */
button, datalist, form, fieldset, input:not([type="checkbox"]):not([type="radio"]), keygen, label, output, select, textarea /* form elements */
display: block /* 1 */

14
src/_box-sizing.sass Normal file
View file

@ -0,0 +1,14 @@
/**
* 1. Reset box-sizing on all elements to border-box.
*
* This uses Jon Neal's method of setting the default box-sizing on the root
* html element and then having all other elements inherit box-sizing
* (https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/).
* This method seems to cause the least number of headaches and override
* issues.
*/
html
box-sizing: border-box /* 1 */
*, *::before, *::after
box-sizing: inherit /* 1 */

29
src/_embedded-content.sass Normal file
View file

@ -0,0 +1,29 @@
/**
* 1. Remove border when inside `a` element in IE 9/10 (from normalize.css).
*
* Note: We don't use a parent `a` because it causes the selector to have
* high specificity and makes it difficult to override. `img` shouldn't
* have borders anyway, so no harm no foul.
*/
img
border: none
/**
* 1. Remove borders from iframes. This isn't 1995 any more.
*/
iframe
border: none /* 1 */
/**
* 1. Prevent modern browsers from displaying `audio` without controls.
* 2. Remove excess height in iOS 5 devices (from normalize.css).
*/
audio:not([controls])
display: none /* 1 */
height: 0 /* 2 */
/**
* Correct overflow not hidden in IE 9/10/11 (from normalize.css).
*/
svg:not(:root)
overflow: hidden

159
src/_form-elements.sass Normal file
View file

@ -0,0 +1,159 @@
/**
* 1. Fully reset fieldsets removing all default styling.
*/
fieldset
margin: 0 /* 1 */
padding: 0 /* 1 */
border: none /* 1 */
/**
* 1. Fully reset lengends removing all default styling.
* 2. On Android Chrome browser lengends don't expand to 100%, so we fix that.
*/
legend
border: 0 /* 1 */
padding: 0 /* 1 */
width: 100% /* 2 */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
input:not([type="checkbox"]):not([type="radio"]),
optgroup,
select,
textarea,
button
margin: 0
padding: 0
border: none
background: none
font: inherit
color: inherit
/**
* 1. Remove border-radius in Safari.
* 2. Remove glossy background in Safari.
*
* Note that this also removes the dropdown arrow in Safari, which isn't
* ideal but there is little we can do about it.
*/
select
border-radius: 0 /* 1 */
-webkit-appearance: none /* 2 */
/**
* Remove default vertical scrollbar in IE 8/9/10/11 (from normalize.css).
*/
textarea
overflow: auto
/**
* 1. Address `overflow` set to `hidden` in IE 8/9/10/11 (from normalize.css).
*/
button
overflow: visible /* 1 */
/**
* 1. Address inconsistent `text-transform` inheritance for `button` and
* `select`. All other form control elements do not inherit `text-transform`
* values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and
* Opera. Correct `select` style inheritance in Firefox
* (from normalize.css).
*/
button,
select
text-transform: none /* 1 */
/**
* 1. Remove inner padding and border in Firefox 4+ (from normalize.css).
*/
button,
input
&::-moz-focus-inner
border: 0 /* 1 */
padding: 0 /* 1 */
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"] /* 1 */,
input[type="submit"],
input[type="reset"]
-webkit-appearance: button /* 2 */
cursor: pointer /* 3 */
text-align: left
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled]
cursor: default
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input
line-height: normal
/**
* Checkboxes and radio inputs are not styleable in most browsers unfortunately,
* so we have to treat them as a special case.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10 (from normalize.css).
* 2. Remove excess padding in IE 8/9/10 (from normalize.css).
*/
input[type="checkbox"],
input[type="radio"]
box-sizing: border-box /* 1 */
padding: 0 /* 2 */
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button
height: auto
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome which is
* unstylable (from normalize.css).
* 2. Remove inner padding and search cancel button in Safari and Chrome on
* OS X. Safari (but not Chrome) clips the cancel button when the search
* input has padding (and `textfield` appearance) (from normalize.css).
*
* Ideally we'd like to support the native cancel button, but unfortunately
* safar
*
*/
input[type="search"]
-webkit-appearance: textfield /* 1 */
&::-webkit-search-cancel-button,
&::-webkit-search-decoration
-webkit-appearance: none /* 2 */
/**
* 1. Update input placeholders to inherit color (IE, Chrome and Safari) and
* opacity (Firefox).
*
* Note: On Firefox number inputs do not respect placeholder styling. This is
* a known bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1004130) with no
* workaround :(.
*/
::-webkit-input-placeholder
color: inherit /* 1 */
::-moz-placeholder
opacity: inherit /* 1 */
:-ms-input-placeholder
color: inherit /* 1 */

8
src/_hidden.sass Normal file
View file

@ -0,0 +1,8 @@
/**
* 1. Address `[hidden]` styling not present in IE 8/9/10 and hide the
* `template` element in IE 8/9/10/11, Safari, and Firefox < 22
* (from normalize.css).
*/
[hidden],
template
display: none /* 1 */

12
src/_links.sass Normal file
View file

@ -0,0 +1,12 @@
/**
* 1. Fully reset link styling.
* 2. Remove gray background color from active links in IE 10
* (from normalize.css).
*/
a
color: inherit /* 1 */
text-decoration: none /* 1 */
background-color: transparent /* 2 */
&:link, &:active, &:visited
color: inherit /* 1 */

7
src/_lists.sass Normal file
View file

@ -0,0 +1,7 @@
ul, ol
margin: 0
padding: 0
list-style-type: none
ol, ul
padding: 0

13
src/_responsive.sass Normal file
View file

@ -0,0 +1,13 @@
html
width: 100%
overflow-x: hidden
input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, meter, progress
width: 100%
img, video, object, embed, iframe
height: auto
max-width: 100%
audio
max-width: 100%

9
src/_tables.sass Normal file
View file

@ -0,0 +1,9 @@
table
border-collapse: collapse
border-spacing: 0
td, th
padding: 0
caption
text-align: inherit

85
src/_typography.sass Normal file
View file

@ -0,0 +1,85 @@
/**
* 1. Prevent iOS and IE text size adjust after device orientation change
* without disabling user zoom.
*/
html
-ms-text-size-adjust: 100% /* 1 */
-webkit-text-size-adjust: 100% /* 1 */
/**
* 1. Remove all styling from `h1-6` elements.
*/
h1, h2, h3, h4, h5, h6
margin: 0 /* 1 */
font-size: inherit /* 1 */
font-weight: inherit /* 1 */
/**
* 1. Remove extra margin around these elements.
*/
p, dl, dd, pre, figure, blockquote
margin: 0 /* 1 */
/**
* 1. Ensure that these elements inherit font-style.
*/
i, cite, em, var, address, dfn
font-style: inherit /* 1 */
/**
* 1. Ensure that these elements inherit text-decoration.
*/
u, s, strike, del, ins
text-decoration: inherit /* 1 */
/**
* 1. Ensure that these elements inherit font-weight.
*/
dfn, strong, th, b
font-weight: inherit /* 1 */
small
font-size: inherit
/**
* 1. Ensure that font-family is inherited.
* 2. Inherit font size in IE.
*/
tt, code, kbd, samp, pre
font-family: inherit /* 1 */
font-size: inherit /* 2 */
/**
* 1. Remove quotation marks.
*/
q
&::before, &::after
content: '' /* 1 */
content: none /* 1 */
blockquote, q
quotes: none /* 1 */
/**
* 1. Reset styling for `mark` elements.
*/
mark
background-color: inherit /* 1 */
color: inherit /* 1 */
hr
box-sizing: content-box /* 1 */
height: 0 /* 1 */
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers
* (from normalize.css).
*/
sub, sup
font-size: 75%
line-height: 0
position: relative
vertical-align: baseline
sup
top: -0.5em
sub
bottom: -0.25em

19
src/full-reset.sass Normal file
View file

@ -0,0 +1,19 @@
@import blocks
@import box-sizing
@import links
@import lists
@import typography
@import embedded-content
@import accessibility
@import tables
@import responsive
@import form-elements
@import hidden
/**
* 1. Remove default padding on body.
* 2. Normalize line-height.
*/
body
margin: 0 /* 1 */
line-height: 1 /* 2 */

493
test/index.html Normal file
View file

@ -0,0 +1,493 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>HTML5 Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/full-reset.min.css">
</head>
<body>
<div id="top" class="page" role="document">
<header role="banner">
<h1>HTML5 Test Page</h1>
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
</header>
<nav role="navigation">
<ul>
<li>
<a href="#text">Text</a>
<ul>
<li><a href="#text__headings">Headings</a></li>
<li><a href="#text__paragraphs">Paragraphs</a></li>
<li><a href="#text__blockquotes">Blockquotes</a></li>
<li><a href="#text__lists">Lists</a></li>
<li><a href="#text__hr">Horizontal rules</a></li>
<li><a href="#text__tables">Tabular data</a></li>
<li><a href="#text__code">Code</a></li>
<li><a href="#text__inline">Inline elements</a></li>
</ul>
</li>
<li>
<a href="#embedded">Embedded content</a>
<ul>
<li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li>
<li><a href="#embedded__canvas">Canvas</a></li>
<li><a href="#embedded__meter">Meter</a></li>
<li><a href="#embedded__progress">Progress</a></li>
<li><a href="#embedded__svg">Inline SVG</a></li>
<li><a href="#embedded__iframe">IFrames</a></li>
</ul>
</li>
<li>
<a href="#forms">Form elements</a>
<ul>
<li><a href="#forms__input">Input fields</a></li>
<li><a href="#forms__select">Select menus</a></li>
<li><a href="#forms__checkbox">Checkboxes</a></li>
<li><a href="#forms__radio">Radio buttons</a></li>
<li><a href="#forms__textareas">Textareas</a></li>
<li><a href="#forms__html5">HTML5 inputs</a></li>
<li><a href="#forms__action">Action buttons</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<section id="text">
<header><h1>Text</h1></header>
<article id="text__headings">
<header>
<h1>Headings</h1>
</header>
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__paragraphs">
<header><h1>Paragraphs</h1></header>
<div>
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__blockquotes">
<header><h1>Blockquotes</h1></header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#!">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__lists">
<header><h1>Lists</h1></header>
<div>
<h3>Definition list</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__hr">
<header><h1>Horizontal rules</h1></header>
<div>
<hr>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__tables">
<header><h1>Tabular data</h1></header>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__code">
<header><h1>Code</h1></header>
<div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h2>Pre-formatted text</h2>
<pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__inline">
<header><h1>Inline elements</h1></header>
<div>
<p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
<p>The <i>i element</i> is text that is offset from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p><cite>This is a citation.</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="embedded">
<header><h1>Embedded content</h1></header>
<article id="embedded__images">
<header><h2>Images</h2></header>
<div>
<h3>No <code>&lt;figure&gt;</code> element</h3>
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
<h3>Linked image</h3>
<a href="http://placekitten.com"><img src="http://placekitten.com/480/480" alt="Image alt text"></a>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
<figure>
<img src="http://placekitten.com/420/420" alt="Image alt text">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__audio">
<header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__video">
<header><h2>Video</h2></header>
<div><video controls="">video</video></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__canvas">
<header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__meter">
<header><h2>Meter</h2></header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__progress">
<header><h2>Progress</h2></header>
<div><progress>progress</progress></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__svg">
<header><h2>Inline SVG</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__iframe">
<header><h2>IFrame</h2></header>
<div><iframe src="http://www.google.com" height="300"></iframe></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="forms">
<header><h1>Form elements</h1></header>
<form>
<fieldset id="forms__input">
<legend>Input fields</legend>
<p>
<label for="input__text">Text Input</label>
<input id="input__text" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__password">Password</label>
<input id="input__password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
</p>
<p>
<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="input__phone">Phone Number</label>
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
</p>
<p>
<label for="input__search">Search</label>
<input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="input__text2">Number Input</label>
<input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
<label for="input__text3" class="error">Error</label>
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label for="input__text4" class="valid">Valid</label>
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__textareas">
<legend>Textareas</legend>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="Input">
<button type="submit">Button</button>
<input type="reset" value="Reset">
<input type="submit" value="Disabled" disabled>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
</main>
<footer role="contentinfo">
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
</footer>
</div>
</body>
</html>