diff --git a/README.md b/README.md index 66c9357..bc4a5e2 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,42 @@ -# Universal +
+

+ Universal CSS reset +

+

A CSS reset that reduces styles to the bare minimum.

+

+ npm +

+
-A CSS reset that strips away almost all of the default browser styles so you can -just set the values you want. +## Usage + +You can add the CSS to a file directly via [unpkg](https://unpkg.com/): + +```html + +``` + +Alternatively, in a JavaScript project you can install the package via npm: + +```sh +npm i @haydn/universal +``` + +If your project uses a bundler like Webpack or Parcel, you can import the CSS file directly: + +```js +import "@haydn/universal/universal.css"; +``` ## Features ### Unset browser defaults -The default styles are removed by a `all: unset` declaration applied to all -elements **except the following**: +The default styles are removed by a `all: unset` declaration applied to **all +elements except the following**: - HTML `head` element - HTML [metadata content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content) elements @@ -18,7 +46,7 @@ elements **except the following**: ### Use box-sizing -All HTML elements are given a `box-sizing: border-box` declaration except the +**All HTML elements** are given a `box-sizing: border-box` declaration **except** the `head` element and [metadata content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content) elements. @@ -103,9 +131,9 @@ elements are given `border: none` and `max-width: 100%` declarations: ## Accessibility -Because this reset removes all default browser styles, important defaults for -accessibility are removed. If you use this reset, you should add your own styles -to ensure your content accessible: +This reset removes some important accessibility defaults. If you use this reset, +you should add your own styles to ensure your content is accessible, most +importantly: -1. Links should have an underline or similar indicator identify them. -2. Elements should be highlighted when focused. +1. Links should be identify with an underline or similar indicator. +2. Focusable elements should be highlighted when focused. diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..68d63afeab52ac8a9ed6fb6e39cebbdc8cb0f153 GIT binary patch literal 11416 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 literal 0 HcmV?d00001