From a960fa1f029d58fc24c3330f09c331c432390544 Mon Sep 17 00:00:00 2001 From: Filipe Linhares Date: Tue, 28 Jun 2016 03:05:49 -0300 Subject: [PATCH] Changes project name and goals :tada: 1.0.0 You can read more about it in the CHANGELOG.md - Sanilize now is ress - Adds travis-ci - Iproves code comments - Adds features to README - ress is under MIT license --- .travis.yml | 5 + CHANGELOG.md | 11 ++ LICENSE.md | 28 +++-- README.md | 34 +++++-- dist/ress.min.css | 5 + dist/sanilize.min.css | 1 - package.json | 26 ++--- sanilize.css => ress.css | 213 ++++++++++++++------------------------- 8 files changed, 145 insertions(+), 178 deletions(-) create mode 100644 .travis.yml create mode 100644 dist/ress.min.css delete mode 100644 dist/sanilize.min.css rename sanilize.css => ress.css (63%) diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..aea1274 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,5 @@ +sudo: false +language: node_js +node_js: + - 'stable' + - '0.12' diff --git a/CHANGELOG.md b/CHANGELOG.md index 096eb77..1448ea9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## [v1.0.0] +#### :zap: sanilize.css renamed to ress + +Before [Sanitize version 3.0.0](https://github.com/10up/sanitize.css/commit/8eb14223c1d5c928a2a51b17d4227849e7b5bdb7) be released, I was thinking about removing the description _"Merge between"_ from sanilize. Sanilize came with some deprecations that I wanted to keep and some new features that I wanted to remove. + +Now with the release of [Sanitize version 4.0.0](https://github.com/10up/sanitize.css/commit/bf3d695016cbd5d17c89361d4273f3d5f69aa0ee) It's time to a new way. + +Since the fork of sanitize, my goal with this project is to make a modern reset with crossbrowsers normalization. Now, **ress** has your own features and resets which you can use and customize. + +The new cool features are documented in the [README](README.md/#features). The source code is clean and pretty documented, you can read it to learn something :smile: + ## [v0.7.4] - Release a landing page :smile: - [sanilize.css](http://filipelinhares.github.io/sanilize.css/) diff --git a/LICENSE.md b/LICENSE.md index 565f84e..1fc8d99 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,15 +1,21 @@ -# CC0 1.0 Universal License +The MIT License (MIT) -Public Domain Dedication +Copyright © 2016 [Filipe Linhares](http://filipelinhares.com) -The person(s) who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the “Software”), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights. - -Unless expressly stated otherwise, the person(s) who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. - -When using or citing the work, you should not imply endorsement by the author or the affirmer. - -This is a [human-readable summary of the Legal Code](https://creativecommons.org/publicdomain/zero/1.0/) ([read the full text](https://creativecommons.org/publicdomain/zero/1.0/legalcode)). +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index d654d82..cec9908 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,30 @@ -# sanilize.css +# ress +Modern CSS reset -> A merge between [sanitize.css][sanitize] by [Jonathan Neal][jonathan] and [normalize.css][normalize] by [Necolas][necolas] - -[jonathan]:https://github.com/jonathantneal -[sanitize]:https://github.com/10up/sanitize.css -[necolas]:https://github.com/necolas -[normalize]:https://github.com/necolas/normalize.css - -Render elements consistently. Style with best practices. +[![Build Status](https://travis-ci.org/filipelinhares/ress.svg?branch=v1.0.0)](https://travis-ci.org/filipelinhares/ress) ## Installation ```sh -npm install --save sanilize +npm install --save ress ``` +## Features +1. Apply `box-sizing: border-box;` in all elements. +2. Reset `padding` and `margin` in all elements. +3. Specify `background-repeat: no-repeat` in all elements. +4. Inherit `text-decoration` and `vertical-align` to `::before` and `::after`. +5. Remove the `outline` when hovering in all browsers. +6. Specify `font-family: monospace` in code elements. +7. Reset `border-radius` in input elements. +8. Specify font inheritance of form elements. +9. Remove the default button styling in all browsers. +10. Specify textarea resizability to vertical. + +## Crossbrowser +**ress** uses [Normalize.css](https://github.com/necolas/normalize.css) under the hood with some customizations to apply a solid base to start your stylesheet. + +## Browser support +Inherit from [Normalize](https://github.com/necolas/normalize.css#browser-support) + ## License -**sanilize.css** is dedicated to the [public domain](LICENSE.md). +[MIT](LICENSE.md) © Filipe Linhares diff --git a/dist/ress.min.css b/dist/ress.min.css new file mode 100644 index 0000000..5cbc62a --- /dev/null +++ b/dist/ress.min.css @@ -0,0 +1,5 @@ +/*! + * ress.css • v1.0.0 + * MIT License + * github.com/filipelinhares/cssre + */html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{background-repeat:no-repeat;padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-webkit-input-placeholder{color:inherit;opacity:.54}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#fff;text-shadow:none}::selection{background-color:#b3d4fc;color:#fff;text-shadow:none} \ No newline at end of file diff --git a/dist/sanilize.min.css b/dist/sanilize.min.css deleted file mode 100644 index bba166c..0000000 --- a/dist/sanilize.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{cursor:default;box-sizing:border-box}*,:after,:before{box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{background-repeat:no-repeat;padding:0;margin:0}html{overflow-y:scroll;-webkit-text-size-adjust:100%}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}small{font-size:75%}[hidden],template{display:none}[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}input{border-radius:0}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}button{overflow:visible}[type=button],[type=date],[type=datetime-local],[type=datetime],[type=email],[type=month],[type=number],[type=password],[type=reset],[type=search],[type=submit],[type=tel],[type=text],[type=time],[type=url],[type=week],button,select,textarea{min-height:1rem}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-webkit-input-placeholder{color:inherit;opacity:.54}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}audio,canvas,iframe,img,progress,svg,video{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}[hidden][aria-hidden=false]{clip:rect(0 0 0 0);display:inherit;position:absolute;@nest &:focus{clip:auto}}[tabindex],a,area,button,input,label,select,textarea{touch-action:manipulation}::-moz-selection{background-color:#b3d4fc;color:#fff;text-shadow:none}::selection{background-color:#b3d4fc;color:#fff;text-shadow:none} \ No newline at end of file diff --git a/package.json b/package.json index 6c7369d..c5e13d5 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,21 @@ { - "name": "sanilize", - "version": "0.7.4", - "description": "Render elements consistently. Style with best practices.", - "author": [ - "Jonathan Neal", - "Nicolas Gallagher" - ], - "license": "CC0", - "style": "dist/sanilize.min.css", - "homepage": "https://github.com/filipelinhares/sanilize.css", + "name": "ress", + "version": "1.0.0", + "description": "A modern CSS reset", + "author": "Filipe Linhares", + "license": "MIT", + "style": "dist/ssre.min.css", + "homepage": "https://github.com/filipelinhares/ress", "repository": { "type": "git", - "url": "https://github.com/filipelinhares/sanilize.css.git" + "url": "https://github.com/filipelinhares/ress.git" }, "bugs": { - "url": "https://github.com/filipelinhares/sanilize.css/issues" + "url": "https://github.com/filipelinhares/ress/issues" }, "scripts": { - "set-up": "npm install", - "compile": "cssnano sanilize.css dist/sanilize.min.css", - "test": "stylelint sanilize.css" + "compile": "cssnano ress.css dist/ress.min.css", + "test": "stylelint ress.css" }, "devDependencies": { "cssnano-cli": "^1.0.3", diff --git a/sanilize.css b/ress.css similarity index 63% rename from sanilize.css rename to ress.css index 4cc5236..cf4a4b8 100755 --- a/sanilize.css +++ b/ress.css @@ -1,12 +1,17 @@ +/*! + * ress.css • v1.0.0 + * MIT License + * github.com/filipelinhares/cssre + */ + /* # ================================================================= # Global selectors # ================================================================= */ -/* Specify the root styles of the document */ - -:root { - cursor: default; +html { box-sizing: border-box; + overflow-y: scroll; /* All browsers without overlaying scrollbars */ + -webkit-text-size-adjust: 100%; /* iOS 8+ */ } *, @@ -17,43 +22,37 @@ ::before, ::after { - text-decoration: inherit; + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ vertical-align: inherit; } -/* Remove margin and padding of all elements */ - +/* Remove margin, padding of all elements and set background-no-repeat as default */ * { - background-repeat: no-repeat; - padding: 0; + background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements */ + padding: 0; /* Reset `padding` and `margin` of all elements */ margin: 0; } -html { - overflow-y: scroll; /* All browsers without overlaying scrollbars */ - -webkit-text-size-adjust: 100%; /* iOS 8+ */ -} - /* # ================================================================= # General elements # ================================================================= */ +/* Add the correct display in iOS 4-7.*/ audio:not([controls]) { - display: none; /* Chrome 40+, iOS 8+, Safari 8+, -nPrevent modern browsers from displaying `audio` without controls */ - height: 0; /* Remove excess height in iOS 5 devices */ + display: none; + height: 0; } hr { - overflow: visible; /* Show the overflow in Edge and IE. */ + overflow: visible; /* Show the overflow in Edge and IE */ } /* -* Correct `block` display not defined for any HTML5 element in IE 8/9. +* Correct `block` display not defined for any HTML5 element in IE 8/9 * Correct `block` display not defined for `details` or `summary` in IE 10/11 -* and Firefox. -* Correct `block` display not defined for `main` in IE 11. +* and Firefox +* Correct `block` display not defined for `main` in IE 11 */ - article, aside, details, @@ -70,58 +69,34 @@ summary { } small { - font-size: 75%; /* All browsers */ + font-size: 80%; /* Set font-size to 80% in `small` elements */ } [hidden], template { - display: none; - + display: none; /* Add the correct display in IE */ } -/* Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+ */ - -[unselectable] { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Address inconsistent styling of `abbr[title]` */ abbr[title] { - border-bottom: none; /* Correct styling in Firefox 39 and Opera 12 */ - text-decoration: underline; /* Correct missing styling in Chrome, Edge, IE, Opera, and Safari */ - text-decoration: underline dotted; /* Correct missing styling in Chrome, Edge, IE, Opera, and Safari */ + border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */ + text-decoration: none; /* Remove text decoration in Firefox 40+ */ } a { - text-decoration: none; /* Specify the text decoration of anchors */ background-color: transparent; /* Remove the gray background on active links in IE 10 */ -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */ } -/* Remove the outline on focused links when they are also active or hovered in all browsers */ - a:active, a:hover { - outline-width: 0; + outline-width: 0; /* Remove the outline when hovering in all browsers */ } -/* Specify the font family of code elements */ - code, kbd, pre, samp { - font-family: monospace, monospace; -} - -/* Address inconsistent styling of b and strong */ - -b, -strong { - font-weight: inherit; /* Correct duplicate application of `bolder` in Safari 6.0.2 */ + font-family: monospace, monospace; /* Specify the font family of code elements */ } b, @@ -129,19 +104,33 @@ strong { font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */ } -/* Address styling not present in Safari and Chrome */ - dfn { - font-style: italic; + font-style: italic; /* Address styling not present in Safari and Chrome */ } /* Address styling not present in IE 8/9 */ - mark { background-color: #ff0; color: #000; } +/* https://gist.github.com/unruthless/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + /* # ================================================================= # Forms # ================================================================= */ @@ -168,46 +157,23 @@ textarea { resize: vertical; /* Specify textarea resizability */ } -/* Specify inheritance of form elements */ - button, input, optgroup, select, textarea { - font: inherit; + font: inherit; /* Specify font inheritance of form elements */ } -button { - overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ +optgroup { + font-weight: bold; /* Restore the font weight unset by the previous rule. */ } -/* Specify the minimum height of form elements */ - -button, -[type="button"], -[type="date"], -[type="datetime"], -[type="datetime-local"], -[type="email"], -[type="month"], -[type="number"], -[type="password"], -[type="reset"], -[type="search"], -[type="submit"], -[type="tel"], -[type="text"], -[type="time"], -[type="url"], -[type="week"], -select, -textarea { - min-height: 1rem; +button { + overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ } -/* Remove inner padding and border in Firefox 4+. */ - +/* Remove inner padding and border in Firefox 4+ */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -217,7 +183,6 @@ button::-moz-focus-inner, } /* Replace focus style removed in the border reset above */ - button:-moz-focusring, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -226,7 +191,7 @@ button:-moz-focusring, } button, -html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4. */ +html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ @@ -237,8 +202,17 @@ select { text-transform: none; /* Firefox 40+, Internet Explorer 11- */ } -/* Style select like a standard input */ +/* Remove the default button styling in all browsers */ +button, +input, +select, +textarea { + background-color: transparent; + border-style: none; + color: inherit; +} +/* Style select like a standard input */ select { -moz-appearance: none; /* Firefox 36+ */ -webkit-appearance: none; /* Chrome 41+ */ @@ -252,18 +226,12 @@ select::-ms-value { color: currentColor; /* Internet Explorer 11+ */ } -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - legend { border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ - color: inherit; /* Correct the color inheritance from `fieldset` elements in IE. */ - display: table; /* Correct the text wrapping in Edge and IE. */ - max-width: 100%; /* Correct the text wrapping in Edge and IE. */ - white-space: normal; /* Correct the text wrapping in Edge and IE. */ + color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ + display: table; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge and IE */ + white-space: normal; /* Correct the text wrapping in Edge and IE */ } ::-webkit-file-upload-button { @@ -271,8 +239,7 @@ legend { font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ } -/* Correct the text style of placeholders in Chrome, Edge, and Safari. */ - +/* Correct the text style of placeholders in Chrome, Edge, and Safari */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; @@ -291,13 +258,8 @@ img { border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ } -audio, -canvas, -iframe, -img, -progress, -svg, -video { +/* Add the correct vertical alignment in Chrome, Firefox, and Opera */ +progress { vertical-align: baseline; } @@ -317,7 +279,6 @@ video { # ================================================================= */ /* Hide content from screens but not screenreaders */ - @media screen { [hidden~="screen"] { display: inherit; @@ -328,49 +289,21 @@ video { } } -/* specify the progress cursor of updating elements */ - +/* Specify the progress cursor of updating elements */ [aria-busy="true"] { cursor: progress; } -/* specify the pointer cursor of trigger elements */ - +/* Specify the pointer cursor of trigger elements */ [aria-controls] { cursor: pointer; } -/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ - +/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ [aria-disabled] { cursor: default; } -/* specify the style of visually hidden yet accessible elements */ - -[hidden][aria-hidden="false"] { - clip: rect(0 0 0 0); - display: inherit; - position: absolute; - - @nest &:focus { - clip: auto; - } -} - -/* Remove delay from tapping on clickable elements */ - -a, -area, -button, -input, -label, -select, -textarea, -[tabindex] { - touch-action: manipulation; -} - /* # ================================================================= # Selection # ================================================================= */ @@ -378,13 +311,13 @@ textarea, /* Specify text selection background color and omit drop shadow */ ::-moz-selection { - background-color: #b3d4fc; /* required when declaring ::selection */ + background-color: #b3d4fc; /* Required when declaring ::selection */ color: #fff; text-shadow: none; } ::selection { - background-color: #b3d4fc; /* required when declaring ::selection */ + background-color: #b3d4fc; /* Required when declaring ::selection */ color: #fff; text-shadow: none; }