feat: Initial beta release

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## Unreleased
+
+## 1.0.0
+
+Initial release! Includes the `a11y`, `reset`, and `combo` stylesheets.

CODE_OF_CONDUCT.md

@@ -0,0 +1,77 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
+

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2019 Mike Engel <[email protected]>
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

README.md

@@ -0,0 +1,110 @@
+# a11y-css-reset
+
+> Global CSS rules to improve accessibility in your site and make your life easier
+
+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).
+
+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.
+
+## Usage
+
+### accessibility only
+
+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);
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hey y'all</title>
+ <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/a11y.css" />
+ <link rel="stylesheet" href="main.css" />
+ </head>
+ <body>
+ <h1>Hi 👋</h1>
+ </body>
+</html>
+```
+
+```css
+@import url("https://unpkg.com/a11y-css-reset/a11y.css");
+
+/* more rules here! */
+ul {
+ list-style-type: disc;
+}
+```
+
+### reset only
+
+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);
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hey y'all</title>
+ <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/reset.css" />
+ <link rel="stylesheet" href="main.css" />
+ </head>
+ <body>
+ <h1>Hi 👋</h1>
+ </body>
+</html>
+```
+
+```css
+@import url("https://unpkg.com/a11y-css-reset/reset.css");
+
+/* more rules here! */
+ul {
+ list-style-type: disc;
+}
+```
+
+### the combo
+
+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);
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hey y'all</title>
+ <link rel="stylesheet" href="https://unpkg.com/a11y-css-reset/combo.css" />
+ <link rel="stylesheet" href="main.css" />
+ </head>
+ <body>
+ <h1>Hi 👋</h1>
+ </body>
+</html>
+```
+
+```css
+@import url("https://unpkg.com/a11y-css-reset/combo.css");
+
+/* more rules here! */
+ul {
+ list-style-type: disc;
+}
+```
+
+### Via JS
+
+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.
+
+```js
+import "~a11y-css-reset/a11y.css";
+import "~a11y-css-reset/reset.css";
+import "~a11y-css-reset/combo.css";
+```
+
+## Contibuting
+
+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.
+
+Issues and pull requests are welcome, but because this is an interview test project, I may not respond and/or merge PRs.
+
+This project is pure CSS—no preprocessing, no development environment to setup, nada! Just plain ol' CSS.
+
+## [License](LICENSE.md)

a11y.css

@@ -0,0 +1,29 @@
+*:focus:not(:focus-visible),
+*:before:focus:not(:focus-visible),
+*:after:focus:not(:focus-visible) {
+ outline: none;
+}
+
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+.visually-hidden {
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ border: 0;
+ padding: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ margin: -1px;
+}
+
+/* prettier-ignore */
+@media(prefers-reduced-motion: reduce) {
+ *,
+ *:before,
+ *:after {
+ transition: none !important;
+ animation: none !important;
+ }
+}

combo.css

@@ -0,0 +1,33 @@
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+*:focus:not(:focus-visible),
+*:before:focus:not(:focus-visible),
+*:after:focus:not(:focus-visible) {
+ outline: none;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ height: 100%;
+}
+
+/* prettier-ignore */
+@media(prefers-reduced-motion: reduce) {
+ *,
+ *:before,
+ *:after {
+ transition: none !important;
+ animation: none !important;
+ }
+}

index.js

@@ -0,0 +1,3 @@
+module.export = function() {
+ throw new Error("a11y-css-reset does not expose any javascript. CSS only!");
+};

package.json

@@ -0,0 +1,26 @@
+{
+ "name": "a11y-css-reset",
+ "version": "1.0.0-rc1",
+ "description": "Global CSS rules to improve accessibility in your site and make your life easier",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/mike-engel/a11y-css-reset.git"
+ },
+ "keywords": [
+ "a11y",
+ "css",
+ "reset",
+ "import",
+ "accessibility"
+ ],
+ "author": "Mike Engel <[email protected]>",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mike-engel/a11y-css-reset/issues"
+ },
+ "homepage": "https://github.com/mike-engel/a11y-css-reset#readme"
+}

reset.css

@@ -0,0 +1,17 @@
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ height: 100%;
+}