├── .gitignore ├── LICENSE ├── README.md ├── border-box.css ├── dest └── bundle.css ├── form.css ├── index.css ├── js.js ├── list.css ├── package.json ├── reset.css └── webkit.css /.gitignore: -------------------------------------------------------------------------------- 1 | # tmp files 2 | lib-cov 3 | *.seed 4 | *.log 5 | *.csv 6 | *.dat 7 | *.out 8 | *.pid 9 | *.gz 10 | 11 | # tmp folders 12 | pids/ 13 | logs/ 14 | results/ 15 | coverage/ 16 | 17 | # node.js 18 | node_modules/ 19 | npm-debug.log 20 | 21 | # osx 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-wipe 2 | [![NPM version][npm-image]][npm-url] 3 | [![Downloads][downloads-image]][downloads-url] 4 | 5 | Reset the browser's styles. The browser should be a blank canvas, having to 6 | remember quirks is unacceptable. Based on 7 | [html5doctor/reset](http://html5doctor.com/html-5-reset-stylesheet/). 8 | 9 | Features: 10 | - removes all `padding`, `margin` and `border` 11 | - wipes decorations 12 | - sets `box-sizing: border-box` for predictable size calculations 13 | - resets list style types 14 | - reset styles on bleeding edge webkit elements 15 | - and much more 16 | 17 | ## Installation 18 | ```sh 19 | $ npm install css-wipe 20 | ``` 21 | 22 | ## Usage 23 | With [sheetify](https://github.com/sheetify/sheetify) or 24 | [cssnext](https://github.com/cssnext/cssnext) installed: 25 | ```css 26 | @import 'css-wipe'; 27 | ``` 28 | 29 | ## See Also: 30 | - [reset.css](http://meyerweb.com/eric/tools/css/reset/). 31 | - [html5doctor/reset](http://html5doctor.com/html-5-reset-stylesheet/) 32 | - [box-sizing border-box FTW](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) 33 | 34 | ## License 35 | [MIT](https://tldrlegal.com/license/mit-license) 36 | 37 | [npm-image]: https://img.shields.io/npm/v/css-wipe.svg?style=flat-square 38 | [npm-url]: https://npmjs.org/package/css-wipe 39 | [downloads-image]: http://img.shields.io/npm/dm/css-wipe.svg?style=flat-square 40 | [downloads-url]: https://npmjs.org/package/css-wipe 41 | -------------------------------------------------------------------------------- /border-box.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | -------------------------------------------------------------------------------- /dest/bundle.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | /* webkit specific styles */ 5 | 6 | input[type="color"]::-webkit-color-swatch { 7 | border: none; 8 | } 9 | 10 | input[type="color"]::-webkit-color-swatch-wrapper { 11 | padding: 0; 12 | } 13 | /* 14 | html5doctor.com Reset Stylesheet 15 | v1.6.1 16 | Last Updated: 2010-09-17 17 | Author: Richard Clark - http://richclarkdesign.com 18 | Twitter: @rich_clark 19 | */ 20 | 21 | html, body, div, span, object, iframe, 22 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 23 | abbr, address, cite, code, 24 | del, dfn, em, img, ins, kbd, q, samp, 25 | small, strong, sub, sup, var, 26 | b, i, 27 | dl, dt, dd, ol, ul, li, 28 | fieldset, form, label, legend, 29 | table, caption, tbody, tfoot, thead, tr, th, td, 30 | article, aside, canvas, details, figcaption, figure, 31 | footer, header, hgroup, menu, nav, section, summary, 32 | time, mark, audio, video { 33 | margin:0; 34 | padding:0; 35 | border:0; 36 | outline:0; 37 | font-size:100%; 38 | vertical-align:baseline; 39 | background:transparent; 40 | font-weight:inherit; 41 | } 42 | 43 | body { 44 | line-height:1; 45 | } 46 | 47 | article,aside,details,figcaption,figure, 48 | footer,header,hgroup,menu,nav,section { 49 | display:block; 50 | } 51 | 52 | nav ul { 53 | list-style:none; 54 | } 55 | 56 | blockquote, q { 57 | quotes:none; 58 | } 59 | 60 | blockquote:before, blockquote:after, 61 | q:before, q:after { 62 | content:''; 63 | content:none; 64 | } 65 | 66 | a { 67 | margin:0; 68 | padding:0; 69 | font-size:100%; 70 | vertical-align:baseline; 71 | background:transparent; 72 | } 73 | 74 | /* change colours to suit your needs */ 75 | ins { 76 | background-color:#ff9; 77 | color:#000; 78 | text-decoration:none; 79 | } 80 | 81 | /* change colours to suit your needs */ 82 | mark { 83 | background-color:#ff9; 84 | color:#000; 85 | font-style:italic; 86 | font-weight:bold; 87 | } 88 | 89 | del { 90 | text-decoration: line-through; 91 | } 92 | 93 | abbr[title], dfn[title] { 94 | border-bottom:1px dotted; 95 | cursor:help; 96 | } 97 | 98 | table { 99 | border-collapse:collapse; 100 | border-spacing:0; 101 | } 102 | 103 | /* change border colour to suit your needs */ 104 | hr { 105 | display:block; 106 | height:1px; 107 | border:0; 108 | border-top:1px solid #cccccc; 109 | margin:1em 0; 110 | padding:0; 111 | } 112 | 113 | input, select { 114 | vertical-align:middle; 115 | } 116 | 117 | input:focus { 118 | outline: none; 119 | } 120 | ul, ol { 121 | list-style-type: none; 122 | } 123 | -------------------------------------------------------------------------------- /form.css: -------------------------------------------------------------------------------- 1 | input:focus { 2 | outline: none; 3 | } 4 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | /* webkit specific styles */ 5 | 6 | input[type="color"]::-webkit-color-swatch { 7 | border: none; 8 | } 9 | 10 | input[type="color"]::-webkit-color-swatch-wrapper { 11 | padding: 0; 12 | } 13 | /* 14 | html5doctor.com Reset Stylesheet 15 | v1.6.1 16 | Last Updated: 2010-09-17 17 | Author: Richard Clark - http://richclarkdesign.com 18 | Twitter: @rich_clark 19 | */ 20 | 21 | html, body, div, span, object, iframe, 22 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 23 | abbr, address, cite, code, 24 | del, dfn, em, img, ins, kbd, q, samp, 25 | small, strong, sub, sup, var, 26 | b, i, 27 | dl, dt, dd, ol, ul, li, 28 | fieldset, form, label, legend, 29 | table, caption, tbody, tfoot, thead, tr, th, td, 30 | article, aside, canvas, details, figcaption, figure, 31 | footer, header, hgroup, menu, nav, section, summary, 32 | time, mark, audio, video { 33 | margin:0; 34 | padding:0; 35 | border:0; 36 | outline:0; 37 | font-size:100%; 38 | vertical-align:baseline; 39 | background:transparent; 40 | font-weight:inherit; 41 | } 42 | 43 | body { 44 | line-height:1; 45 | } 46 | 47 | article,aside,details,figcaption,figure, 48 | footer,header,hgroup,menu,nav,section { 49 | display:block; 50 | } 51 | 52 | nav ul { 53 | list-style:none; 54 | } 55 | 56 | blockquote, q { 57 | quotes:none; 58 | } 59 | 60 | blockquote:before, blockquote:after, 61 | q:before, q:after { 62 | content:''; 63 | content:none; 64 | } 65 | 66 | a { 67 | margin:0; 68 | padding:0; 69 | font-size:100%; 70 | vertical-align:baseline; 71 | background:transparent; 72 | } 73 | 74 | /* change colours to suit your needs */ 75 | ins { 76 | background-color:#ff9; 77 | color:#000; 78 | text-decoration:none; 79 | } 80 | 81 | /* change colours to suit your needs */ 82 | mark { 83 | background-color:#ff9; 84 | color:#000; 85 | font-style:italic; 86 | font-weight:bold; 87 | } 88 | 89 | del { 90 | text-decoration: line-through; 91 | } 92 | 93 | abbr[title], dfn[title] { 94 | border-bottom:1px dotted; 95 | cursor:help; 96 | } 97 | 98 | table { 99 | border-collapse:collapse; 100 | border-spacing:0; 101 | } 102 | 103 | /* change border colour to suit your needs */ 104 | hr { 105 | display:block; 106 | height:1px; 107 | border:0; 108 | border-top:1px solid #cccccc; 109 | margin:1em 0; 110 | padding:0; 111 | } 112 | 113 | input, select { 114 | vertical-align:middle; 115 | } 116 | 117 | input:focus { 118 | outline: none; 119 | } 120 | ul, ol { 121 | list-style-type: none; 122 | } 123 | -------------------------------------------------------------------------------- /js.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = "\n* {\n box-sizing: border-box;\n}\n/* webkit specific styles */\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: none;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n/*\nhtml5doctor.com Reset Stylesheet\nv1.6.1\nLast Updated: 2010-09-17\nAuthor: Richard Clark - http://richclarkdesign.com\nTwitter: @rich_clark\n*/\n\nhtml, body, div, span, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\nabbr, address, cite, code,\ndel, dfn, em, img, ins, kbd, q, samp,\nsmall, strong, sub, sup, var,\nb, i,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section, summary,\ntime, mark, audio, video {\n margin:0;\n padding:0;\n border:0;\n outline:0;\n font-size:100%;\n vertical-align:baseline;\n background:transparent;\n font-weight:inherit;\n}\n\nbody {\n line-height:1;\n}\n\narticle,aside,details,figcaption,figure,\nfooter,header,hgroup,menu,nav,section {\n display:block;\n}\n\nnav ul {\n list-style:none;\n}\n\nblockquote, q {\n quotes:none;\n}\n\nblockquote:before, blockquote:after,\nq:before, q:after {\n content:'';\n content:none;\n}\n\na {\n margin:0;\n padding:0;\n font-size:100%;\n vertical-align:baseline;\n background:transparent;\n}\n\n/* change colours to suit your needs */\nins {\n background-color:#ff9;\n color:#000;\n text-decoration:none;\n}\n\n/* change colours to suit your needs */\nmark {\n background-color:#ff9;\n color:#000;\n font-style:italic;\n font-weight:bold;\n}\n\ndel {\n text-decoration: line-through;\n}\n\nabbr[title], dfn[title] {\n border-bottom:1px dotted;\n cursor:help;\n}\n\ntable {\n border-collapse:collapse;\n border-spacing:0;\n}\n\n/* change border colour to suit your needs */\nhr {\n display:block;\n height:1px;\n border:0;\n border-top:1px solid #cccccc;\n margin:1em 0;\n padding:0;\n}\n\ninput, select {\n vertical-align:middle;\n}\n\ninput:focus {\n outline: none;\n}\nul, ol {\n list-style-type: none;\n}\n"; 4 | -------------------------------------------------------------------------------- /list.css: -------------------------------------------------------------------------------- 1 | ul, ol { 2 | list-style-type: none; 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-wipe", 3 | "version": "4.3.0", 4 | "description": "Reset the browser's styles", 5 | "main": "index.css", 6 | "repository": "yoshuawuyts/css-wipe", 7 | "keywords": [ 8 | "reset", 9 | "css", 10 | "sheetify", 11 | "cssnext" 12 | ], 13 | "license": "MIT", 14 | "scripts": {} 15 | } 16 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | html5doctor.com Reset Stylesheet 3 | v1.6.1 4 | Last Updated: 2010-09-17 5 | Author: Richard Clark - http://richclarkdesign.com 6 | Twitter: @rich_clark 7 | */ 8 | 9 | html, body, div, span, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | abbr, address, cite, code, 12 | del, dfn, em, img, ins, kbd, q, samp, 13 | small, strong, sub, sup, var, 14 | b, i, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, figcaption, figure, 19 | footer, header, hgroup, menu, nav, section, summary, 20 | time, mark, audio, video { 21 | margin:0; 22 | padding:0; 23 | border:0; 24 | outline:0; 25 | font-size:100%; 26 | vertical-align:baseline; 27 | background:transparent; 28 | font-weight:inherit; 29 | } 30 | 31 | body { 32 | line-height:1; 33 | } 34 | 35 | article,aside,details,figcaption,figure, 36 | footer,header,hgroup,menu,nav,section { 37 | display:block; 38 | } 39 | 40 | nav ul { 41 | list-style:none; 42 | } 43 | 44 | blockquote, q { 45 | quotes:none; 46 | } 47 | 48 | blockquote:before, blockquote:after, 49 | q:before, q:after { 50 | content:''; 51 | content:none; 52 | } 53 | 54 | a { 55 | margin:0; 56 | padding:0; 57 | font-size:100%; 58 | vertical-align:baseline; 59 | background:transparent; 60 | } 61 | 62 | /* change colours to suit your needs */ 63 | ins { 64 | background-color:#ff9; 65 | color:#000; 66 | text-decoration:none; 67 | } 68 | 69 | /* change colours to suit your needs */ 70 | mark { 71 | background-color:#ff9; 72 | color:#000; 73 | font-style:italic; 74 | font-weight:bold; 75 | } 76 | 77 | del { 78 | text-decoration: line-through; 79 | } 80 | 81 | abbr[title], dfn[title] { 82 | border-bottom:1px dotted; 83 | cursor:help; 84 | } 85 | 86 | table { 87 | border-collapse:collapse; 88 | border-spacing:0; 89 | } 90 | 91 | /* change border colour to suit your needs */ 92 | hr { 93 | display:block; 94 | height:1px; 95 | border:0; 96 | border-top:1px solid #cccccc; 97 | margin:1em 0; 98 | padding:0; 99 | } 100 | 101 | input, select { 102 | vertical-align:middle; 103 | } 104 | 105 | -------------------------------------------------------------------------------- /webkit.css: -------------------------------------------------------------------------------- 1 | /* webkit specific styles */ 2 | 3 | input[type="color"]::-webkit-color-swatch { 4 | border: none; 5 | } 6 | 7 | input[type="color"]::-webkit-color-swatch-wrapper { 8 | padding: 0; 9 | } 10 | --------------------------------------------------------------------------------