├── .gitignore ├── index.js ├── reset.css ├── a11y.css ├── package.json ├── LICENSE.md ├── CHANGELOG.md ├── .all-contributorsrc ├── CODE_OF_CONDUCT.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | 4 | *.orig 5 | *.min.css 6 | combo.css 7 | 8 | node_modules/ 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.export = function() { 2 | throw new Error("a11y-css-reset does not expose any javascript. CSS only!"); 3 | }; 4 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* apply a natural box layout model to all elements, but allowing components to change 2 | * https://www.paulirish.com/2012/box-sizing-border-box-ftw/ 3 | */ 4 | html { 5 | box-sizing: border-box; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | html, 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | min-height: 100%; 19 | width: 100%; 20 | } 21 | -------------------------------------------------------------------------------- /a11y.css: -------------------------------------------------------------------------------- 1 | *:focus:not(:focus-visible), 2 | *::before:focus:not(:focus-visible), 3 | *::after:focus:not(:focus-visible) { 4 | outline: none; 5 | } 6 | 7 | /* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */ 8 | .visually-hidden { 9 | position: absolute; 10 | white-space: nowrap; 11 | width: 1px; 12 | height: 1px; 13 | overflow: hidden; 14 | border: 0; 15 | padding: 0; 16 | clip: rect(0 0 0 0); 17 | clip-path: inset(50%); 18 | margin: -1px; 19 | } 20 | 21 | /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */ 22 | .plain-list { 23 | list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); 24 | padding-left: 0; 25 | } 26 | 27 | /* prettier-ignore */ 28 | @media(prefers-reduced-motion: reduce) { 29 | *, 30 | *::before, 31 | *::after { 32 | transition: none !important; 33 | animation: none !important; 34 | scroll-behavior: auto !important; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11y-css-reset", 3 | "version": "1.2.0", 4 | "description": "Global CSS rules to improve accessibility in your site and make your life easier", 5 | "main": "index.js", 6 | "scripts": { 7 | "combine": "cat reset.css a11y.css > combo.css", 8 | "minify": "minify combo.css > combo.min.css;minify a11y.css > a11y.min.css;minify reset.css > reset.min.css", 9 | "prepublishOnly": "npm run combine && npm run minify", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/mike-engel/a11y-css-reset.git" 15 | }, 16 | "keywords": [ 17 | "a11y", 18 | "css", 19 | "reset", 20 | "import", 21 | "accessibility" 22 | ], 23 | "files": [ 24 | "*.css" 25 | ], 26 | "author": "Mike Engel ", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/mike-engel/a11y-css-reset/issues" 30 | }, 31 | "homepage": "https://github.com/mike-engel/a11y-css-reset#readme", 32 | "devDependencies": { 33 | "minify": "^4.1.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2019 Mike Engel 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Unreleased 4 | 5 | ## 1.2.0 6 | 7 | ### New features 8 | 9 | - `border-box` is now easier to override [#10](https://github.com/mike-engel/a11y-css-reset/issues/10), [#12](https://github.com/mike-engel/a11y-css-reset/issues/12) 10 | 11 | ## 1.1.1 12 | 13 | ### Fixes 14 | 15 | - Increase browser support by using `::` over `:` for pseudo-selectors [#6](https://github.com/mike-engel/a11y-css-reset/pull/6) 16 | - Change the body height to be a `min-height` instead of `height` for better flexibility [#7](https://github.com/mike-engel/a11y-css-reset/pull/7) 17 | 18 | ## 1.1.0 19 | 20 | ### New features 21 | 22 | - Adds `scroll-behavior` for reduced motion users [#2](https://github.com/mike-engel/a11y-css-reset/pull/2) 23 | 24 | ### Fixes 25 | 26 | - Removes extraneous `width: 100%` for `body` elements [#2](https://github.com/mike-engel/a11y-css-reset/pull/2) 27 | - Fixes a typo in the README [#1](https://github.com/mike-engel/a11y-css-reset/pull/1) 28 | 29 | ## 1.0.1 30 | 31 | Publish all files instead of ones that weren't git-ignored. 32 | 33 | ## 1.0.0 34 | 35 | Nothing new here, just a 1.0 release. Enjoy! 36 | 37 | ## 1.0.0-rc3 38 | 39 | ### Fixes 40 | 41 | - Limit the amount that `.plain-list` resets 42 | 43 | ## 1.0.0-rc2 44 | 45 | ### New features 46 | 47 | - Add a11y helper classes 48 | - Add minified versions of each css file 49 | 50 | ### Fixes 51 | 52 | - Remove hand-made combo.css and add code to automatically generate it 53 | 54 | ## 1.0.0-rc1 55 | 56 | Initial release! Includes the `a11y`, `reset`, and `combo` stylesheets. 57 | -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "a11y-css-reset", 3 | "projectOwner": "mike-engel", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "angular", 12 | "contributors": [ 13 | { 14 | "login": "mike-engel", 15 | "name": "Mike Engel", 16 | "avatar_url": "https://avatars0.githubusercontent.com/u/464447?v=4", 17 | "profile": "https://www.mike-engel.com", 18 | "contributions": [ 19 | "question", 20 | "bug", 21 | "code", 22 | "review", 23 | "maintenance", 24 | "infra", 25 | "example", 26 | "doc", 27 | "ideas" 28 | ] 29 | }, 30 | { 31 | "login": "lukehler", 32 | "name": "Luke Ehler", 33 | "avatar_url": "https://avatars0.githubusercontent.com/u/25492369?v=4", 34 | "profile": "https://github.com/lukehler", 35 | "contributions": [ 36 | "code" 37 | ] 38 | }, 39 | { 40 | "login": "qpowell", 41 | "name": "Quinten Powell", 42 | "avatar_url": "https://avatars2.githubusercontent.com/u/1351050?v=4", 43 | "profile": "https://github.com/qpowell", 44 | "contributions": [ 45 | "doc" 46 | ] 47 | }, 48 | { 49 | "login": "toastal", 50 | "name": "toastal", 51 | "avatar_url": "https://avatars2.githubusercontent.com/u/561087?v=4", 52 | "profile": "https://gitlab.com/toastal", 53 | "contributions": [ 54 | "code" 55 | ] 56 | }, 57 | { 58 | "login": "notiv-nt", 59 | "name": "Mikhail Novikov", 60 | "avatar_url": "https://avatars0.githubusercontent.com/u/10743009?v=4", 61 | "profile": "http://notiv.org/", 62 | "contributions": [ 63 | "code" 64 | ] 65 | }, 66 | { 67 | "login": "Offirmo", 68 | "name": "offirmo", 69 | "avatar_url": "https://avatars0.githubusercontent.com/u/603503?v=4", 70 | "profile": "http://www.offirmo.net/", 71 | "contributions": [ 72 | "ideas", 73 | "code" 74 | ] 75 | } 76 | ], 77 | "contributorsPerLine": 7 78 | } 79 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at mike@mike-engel.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # a11y-css-reset 2 | 3 | > Global CSS rules to improve accessibility in your site and make your life easier 4 | 5 | Included are three stylesheets you can include in your sites. One is strictly best practice CSS rules for accessibility, and another is what I consider to be best practices for starting development. The third combines them into a single stylesheet. These are meant to be used with the CSS [`@import` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@import). 6 | 7 | This project is available on npm and [unpkg](https://unpkg.com/) so things should be fast as well as versioned! For more info about versioning, read the [examples](https://unpkg.com/#examples) section of unpkg's website. 8 | 9 | ## Usage 10 | 11 | ### accessibility only 12 | 13 | If you just want some CSS rules focused on accessibility, include the `a11y` stylesheet _before_ any other CSS rules you write. You can see the current ruleset deployed by opening the url for [a11y.css](https://unpkg.com/a11y-css-reset/a11y.css); 14 | 15 | ```html 16 | 17 | 18 | 19 | Hey y'all 20 | 21 | 22 | 23 | 24 |

Hi 👋

25 | 26 | 27 | ``` 28 | 29 | ```css 30 | @import url("https://unpkg.com/a11y-css-reset/a11y.css"); 31 | 32 | /* more rules here! */ 33 | ul { 34 | list-style-type: disc; 35 | } 36 | ``` 37 | 38 | ### reset only 39 | 40 | If you just want some CSS rules focused on providing a better out-of-the-box dev experience, include the `reset` stylesheet _before_ any other CSS rules you write. You can see the current ruleset deployed by opening the url for [reset.css](https://unpkg.com/a11y-css-reset/reset.css); 41 | 42 | ```html 43 | 44 | 45 | 46 | Hey y'all 47 | 48 | 49 | 50 | 51 |

Hi 👋

52 | 53 | 54 | ``` 55 | 56 | ```css 57 | @import url("https://unpkg.com/a11y-css-reset/reset.css"); 58 | 59 | /* more rules here! */ 60 | ul { 61 | list-style-type: disc; 62 | } 63 | ``` 64 | 65 | ### the combo 66 | 67 | If you just both the `reset` and `a11y` stylesheets, include the `combo` stylesheet _before_ any other CSS rules you write. You can see the current ruleset deployed by opening the url for [combo.css](https://unpkg.com/a11y-css-reset/combo.css); 68 | 69 | ```html 70 | 71 | 72 | 73 | Hey y'all 74 | 75 | 76 | 77 | 78 |

Hi 👋

79 | 80 | 81 | ``` 82 | 83 | ```css 84 | @import url("https://unpkg.com/a11y-css-reset/combo.css"); 85 | 86 | /* more rules here! */ 87 | ul { 88 | list-style-type: disc; 89 | } 90 | ``` 91 | 92 | ### Via JS 93 | 94 | If you are able to include CSS from within your javascript files through something like webpack, this project is also available from npm. Unlike the CSS at-rule, this does _not_ need to come before any other rules. It should be near the top due to the cascading nature of CSS, however. 95 | 96 | ```js 97 | import "~a11y-css-reset/a11y.css"; 98 | import "~a11y-css-reset/reset.css"; 99 | import "~a11y-css-reset/combo.css"; 100 | ``` 101 | 102 | ## Contributing 103 | 104 | Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 105 | 106 | Issues and pull requests are welcome!. 107 | 108 | This project is pure CSS—no preprocessing, no development environment to setup, nada! Just plain ol' CSS. 109 | 110 | ## [License](LICENSE.md) 111 | 112 | ## Contributors ✨ 113 | 114 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
Mike Engel
Mike Engel
💬 🐛 💻 👀 🚧 🚇 💡 📖 🤔		Luke Ehler
Luke Ehler
💻		Quinten Powell
Quinten Powell
📖		toastal
toastal
💻		Mikhail Novikov
Mikhail Novikov
💻		offirmo
offirmo
🤔 💻
128 | 129 | 130 | 131 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 132 | --------------------------------------------------------------------------------