├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist ├── reset.css └── reset.min.css ├── package-lock.json ├── package.json └── src └── reset.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | npm-debug.* 3 | *.scssc 4 | *.log 5 | *.swp 6 | .DS_Store 7 | .sass-cache 8 | node_modules 9 | test.html 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Ensure your work is thoroughly tested, to the best of your abilities 13 | 3. You may merge the Pull Request in once you have the sign-off from a maintainer 14 | 15 | ## Code of Conduct 16 | 17 | ### Our Pledge 18 | 19 | In the interest of fostering an open and welcoming environment, we as 20 | contributors and maintainers pledge to making participation in our project and 21 | our community a harassment-free experience for everyone, regardless of age, body 22 | size, disability, ethnicity, gender identity and expression, level of experience, 23 | nationality, personal appearance, race, religion, or sexual identity and 24 | orientation. 25 | 26 | ### Our Standards 27 | 28 | Examples of behavior that contributes to creating a positive environment 29 | include: 30 | 31 | - Using welcoming and inclusive language 32 | - Being respectful of differing viewpoints and experiences 33 | - Gracefully accepting constructive criticism 34 | - Focusing on what is best for the community 35 | - Showing empathy towards other community members 36 | 37 | Examples of unacceptable behavior by participants include: 38 | 39 | - The use of sexualized language or imagery and unwelcome sexual attention or 40 | advances 41 | - Trolling, insulting/derogatory comments, and personal or political attacks 42 | - Public or private harassment 43 | - Publishing others' private information, such as a physical or electronic 44 | address, without explicit permission 45 | - Other conduct which could reasonably be considered inappropriate in a 46 | professional setting 47 | 48 | ### Our Responsibilities 49 | 50 | Project maintainers are responsible for clarifying the standards of acceptable 51 | behavior and are expected to take appropriate and fair corrective action in 52 | response to any instances of unacceptable behavior. 53 | 54 | Project maintainers have the right and responsibility to remove, edit, or 55 | reject comments, commits, code, wiki edits, issues, and other contributions 56 | that are not aligned to this Code of Conduct, or to ban temporarily or 57 | permanently any contributor for other behaviors that they deem inappropriate, 58 | threatening, offensive, or harmful. 59 | 60 | ### Scope 61 | 62 | This Code of Conduct applies both within project spaces and in public spaces 63 | when an individual is representing the project or its community. Examples of 64 | representing a project or community include using an official project e-mail 65 | address, posting via an official social media account, or acting as an appointed 66 | representative at an online or offline event. Representation of a project may be 67 | further defined and clarified by project maintainers. 68 | 69 | ### Enforcement 70 | 71 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 72 | reported by contacting the project team at me@andy-bell.design. All 73 | complaints will be reviewed and investigated and will result in a response that 74 | is deemed necessary and appropriate to the circumstances. The project team is 75 | obligated to maintain confidentiality with regard to the reporter of an incident. 76 | Further details of specific enforcement policies may be posted separately. 77 | 78 | Project maintainers who do not follow or enforce the Code of Conduct in good 79 | faith may face temporary or permanent repercussions as determined by other 80 | members of the project's leadership. 81 | 82 | ### Attribution 83 | 84 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 85 | available at [http://contributor-covenant.org/version/1/4][version] 86 | 87 | [homepage]: http://contributor-covenant.org 88 | [version]: http://contributor-covenant.org/version/1/4/ 89 | 90 | 91 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Andy Bell and other contributors 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A modern CSS reset 2 | 3 | 🚨 **Important announcement**: This version of the reset is now archived. You can read a [more up to date one here](https://andy-bell.co.uk/a-more-modern-css-reset/). 4 | 5 | *** 6 | 7 | ![The Uncompressed size of this reset](https://img.badgesize.io/https://unpkg.com/modern-css-reset?label=Uncompressed%20Size) 8 | ![The GZIP size of this reset](https://img.badgesize.io/https://unpkg.com/modern-css-reset?compression=gzip&label=GZIP%20Size) 9 | ![The Brotli size of this reset](https://img.badgesize.io/https://unpkg.com/modern-css-reset?compression=brotli&label=Brotli%20Size) 10 | [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) 11 | 12 | A tiny little reset that you can use as the basis of your CSS projects. You can read a [breakdown of it here](https://hankchizljaw.com/wrote/a-modern-css-reset/). 13 | 14 | ## Installation 15 | 16 | NPM: 17 | 18 | ```console 19 | npm install --save-dev modern-css-reset 20 | ``` 21 | 22 | Yarn: 23 | 24 | ```console 25 | yarn add modern-css-reset 26 | ``` 27 | 28 | Unpkg CDN: 29 | 30 | ```html 31 | 32 | ``` 33 | 34 | jsDelivr CDN: 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | ### Manual installation 41 | 42 | First, let's clone this repository: 43 | 44 | ```console 45 | git clone https://github.com/hankchizljaw/modern-css-reset.git 46 | ``` 47 | 48 | Then, go to `modern-css-reset` directory: 49 | 50 | ```console 51 | cd modern-css-reset 52 | ``` 53 | 54 | And now, you can minify and move the main reset to the `dist` by running: 55 | 56 | ```console 57 | npm run build 58 | ``` 59 | 60 | That's it! 🎉 61 | 62 | ## License 63 | 64 | MIT 65 | -------------------------------------------------------------------------------- /dist/reset.css: -------------------------------------------------------------------------------- 1 | /* Box sizing rules */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Remove default margin */ 9 | body, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | p, 15 | figure, 16 | blockquote, 17 | dl, 18 | dd { 19 | margin: 0; 20 | } 21 | 22 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 23 | ul[role="list"], 24 | ol[role="list"] { 25 | list-style: none; 26 | } 27 | 28 | /* Set core root defaults */ 29 | html:focus-within { 30 | scroll-behavior: smooth; 31 | } 32 | 33 | /* Set core body defaults */ 34 | body { 35 | min-height: 100vh; 36 | text-rendering: optimizeSpeed; 37 | line-height: 1.5; 38 | } 39 | 40 | /* A elements that don't have a class get default styles */ 41 | a:not([class]) { 42 | text-decoration-skip-ink: auto; 43 | } 44 | 45 | /* Make images easier to work with */ 46 | img, 47 | picture { 48 | max-width: 100%; 49 | display: block; 50 | } 51 | 52 | /* Inherit fonts for inputs and buttons */ 53 | input, 54 | button, 55 | textarea, 56 | select { 57 | font: inherit; 58 | } 59 | 60 | /* Remove all animations and transitions for people that prefer not to see them */ 61 | @media (prefers-reduced-motion: reduce) { 62 | html:focus-within { 63 | scroll-behavior: auto; 64 | } 65 | *, 66 | *::before, 67 | *::after { 68 | animation-duration: 0.01ms !important; 69 | animation-iteration-count: 1 !important; 70 | transition-duration: 0.01ms !important; 71 | scroll-behavior: auto !important; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /dist/reset.min.css: -------------------------------------------------------------------------------- 1 | *,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} 2 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modern-css-reset", 3 | "version": "1.4.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "uglifycss": { 8 | "version": "0.0.29", 9 | "resolved": "https://registry.npmjs.org/uglifycss/-/uglifycss-0.0.29.tgz", 10 | "integrity": "sha512-J2SQ2QLjiknNGbNdScaNZsXgmMGI0kYNrXaDlr4obnPW9ni1jljb1NeEVWAiTgZ8z+EBWP2ozfT9vpy03rjlMQ==", 11 | "dev": true 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modern-css-reset", 3 | "version": "1.4.0", 4 | "description": "A bare-bones CSS reset for modern web development", 5 | "main": "./dist/reset.min.css", 6 | "scripts": { 7 | "build": "uglifycss src/reset.css > dist/reset.min.css && cp src/reset.css dist/reset.css" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/hankchizljaw/modern-css-reset.git" 12 | }, 13 | "keywords": [ 14 | "css reset", 15 | "modern css reset" 16 | ], 17 | "author": "Andy Bell (https://hankchizljaw.com)", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/hankchizljaw/modern-css-reset/issues" 21 | }, 22 | "homepage": "https://github.com/hankchizljaw/modern-css-reset#readme", 23 | "devDependencies": { 24 | "uglifycss": "0.0.29" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/reset.css: -------------------------------------------------------------------------------- 1 | /* Box sizing rules */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Remove default margin */ 9 | body, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | p, 15 | figure, 16 | blockquote, 17 | dl, 18 | dd { 19 | margin: 0; 20 | } 21 | 22 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 23 | ul[role="list"], 24 | ol[role="list"] { 25 | list-style: none; 26 | } 27 | 28 | /* Set core root defaults */ 29 | html:focus-within { 30 | scroll-behavior: smooth; 31 | } 32 | 33 | /* Set core body defaults */ 34 | body { 35 | min-height: 100vh; 36 | text-rendering: optimizeSpeed; 37 | line-height: 1.5; 38 | } 39 | 40 | /* A elements that don't have a class get default styles */ 41 | a:not([class]) { 42 | text-decoration-skip-ink: auto; 43 | } 44 | 45 | /* Make images easier to work with */ 46 | img, 47 | picture { 48 | max-width: 100%; 49 | display: block; 50 | } 51 | 52 | /* Inherit fonts for inputs and buttons */ 53 | input, 54 | button, 55 | textarea, 56 | select { 57 | font: inherit; 58 | } 59 | 60 | /* Remove all animations and transitions for people that prefer not to see them */ 61 | @media (prefers-reduced-motion: reduce) { 62 | html:focus-within { 63 | scroll-behavior: auto; 64 | } 65 | *, 66 | *::before, 67 | *::after { 68 | animation-duration: 0.01ms !important; 69 | animation-iteration-count: 1 !important; 70 | transition-duration: 0.01ms !important; 71 | scroll-behavior: auto !important; 72 | } 73 | } 74 | --------------------------------------------------------------------------------