Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matssom/accessible-reset
:wheelchair: An accessibility first CSS reset.
https://github.com/matssom/accessible-reset
accessibility accessible css css-in-js css-reset css3 frontend inclusive library one-liner onel oneliners styling universal
Last synced: 12 days ago
JSON representation
:wheelchair: An accessibility first CSS reset.
- Host: GitHub
- URL: https://github.com/matssom/accessible-reset
- Owner: matssom
- License: mit
- Created: 2020-11-18T23:06:11.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-29T13:40:51.000Z (almost 4 years ago)
- Last Synced: 2024-12-12T23:34:26.861Z (21 days ago)
- Topics: accessibility, accessible, css, css-in-js, css-reset, css3, frontend, inclusive, library, one-liner, onel, oneliners, styling, universal
- Language: JavaScript
- Homepage:
- Size: 133 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## What is Accessible Reset?
Accessible Reset is a `css` reset library with a hint of `js` that makes your webapps more accessible with only 1 line of code. The goal of accessible-reset is NOT to be a replacement of other libraries like `normailze.css`, but to add accessible features to them instead. The bundle file that includes both the `css` and `js` is under 6kb in size and if you choose to include the `css` and `js` separately, the total size comes in under 2kb.
## What does it do?
There are very few things you need to think about when using Accessible Reset, but here are a few things Accessible Reset does that is worth knowing about:
- Preventing the page-width from jumping when moving from a non-scrollable page to a scrollable one. This issue mostly affects windows users.
- Enhances the behaviour when tabbing through a site. Automatically applies outline to focused elements when tabbing without disturbing the usual behaviour when clicking around on the webpage.
- Sets the value `1rem = 10px` without disturbing the accessability features of the user agent stylesheet. This enables developers to calculate relative font-sizes much easier. (`1.8rem = 18px` etc...)
For more information, look at the fully commented `style.css` file in the `src` foler of [this](https://github.com/matssom/accessible-reset.git) repository.
## Installation
Accessible Reset can be used on static and dynamic pages. You can either import the `css` and `js` separately, or just include the js bundle that also includes the styles.
:exclamation: **Note:**
Accessible Reset works with `normalize.css`, but include `normalize.css` **first** for the best results.
### With npm:
Install the package:
```js
npm install accessible-reset --save
```
Import the package:
```js
import 'accessible-reset';
```
If you want to minimize the file footprint (2kb instead of 6kb), you can include the js and css separately:
```js
import 'accessible-reset/accessible-reset.css';
import 'accessible-reset/accessible-reset.js';
```
:exclamation: **Note:** Your build process needs to accept css files for you to be able to import css files directly.
### Include locally:
Download `accessible-reset.bundle.js` from the root of [this](https://github.com/matssom/accessible-reset.git) repository.
Link to the file locally in the head of your `index.html` file:
```html
...
...
```
:exclamation: **Note:**
You can optionally download and include the stylesheet `accessible-reset.css` in the head of your `index.html` and include the `accessible-reset.js` file to the bottom of the `` tag if you have problems with [flashes of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) or want a smaller file footprint (2kb instead of 6kb). By default, the stylesheet is included in the script tag.
```html
...
...
...
```