{"id":16229483,"url":"https://github.com/matssom/accessible-reset","last_synced_at":"2025-04-08T05:42:11.176Z","repository":{"id":57172421,"uuid":"314080145","full_name":"matssom/accessible-reset","owner":"matssom","description":":wheelchair: An accessibility first CSS reset.","archived":false,"fork":false,"pushed_at":"2021-01-29T13:40:51.000Z","size":136,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T21:05:02.949Z","etag":null,"topics":["accessibility","accessible","css","css-in-js","css-reset","css3","frontend","inclusive","library","one-liner","onel","oneliners","styling","universal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matssom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-18T23:06:11.000Z","updated_at":"2021-12-02T17:24:51.000Z","dependencies_parsed_at":"2022-08-24T13:30:59.695Z","dependency_job_id":null,"html_url":"https://github.com/matssom/accessible-reset","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matssom%2Faccessible-reset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matssom%2Faccessible-reset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matssom%2Faccessible-reset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matssom%2Faccessible-reset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matssom","download_url":"https://codeload.github.com/matssom/accessible-reset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785920,"owners_count":20995642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","accessible","css","css-in-js","css-reset","css3","frontend","inclusive","library","one-liner","onel","oneliners","styling","universal"],"created_at":"2024-10-10T12:58:24.990Z","updated_at":"2025-04-08T05:42:11.154Z","avatar_url":"https://github.com/matssom.png","language":"JavaScript","readme":"\n## What is Accessible Reset?\n\nAccessible 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.\n\n\u003cbr\u003e\n\n## What does it do?\n\nThere 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:\n\n- Preventing the page-width from jumping when moving from a non-scrollable page to a scrollable one. This issue mostly affects windows users.\n- 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.\n- 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...)\n\nFor more information, look at the fully commented `style.css` file in the `src` foler of [this](https://github.com/matssom/accessible-reset.git) repository.\n\n\u003cbr\u003e\n\n## Installation\n\u003chr\u003e\n\n\u003cbr\u003e\n\nAccessible 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.\n\n\u003cbr\u003e\n\n:exclamation: **Note:**\nAccessible Reset works with `normalize.css`, but include `normalize.css` **first** for the best results.\n\n\u003cbr\u003e\n\n### With npm:\n\u003chr\u003e\n\nInstall the package:\n\n```js\nnpm install accessible-reset --save\n```\n\nImport the package:\n\n```js \nimport 'accessible-reset';\n```\n\n\nIf you want to minimize the file footprint (2kb instead of 6kb), you can include the js and css separately:\n\n```js\nimport 'accessible-reset/accessible-reset.css';\nimport 'accessible-reset/accessible-reset.js';\n```\n\n:exclamation: **Note:** Your build process needs to accept css files for you to be able to import css files directly.\n\n\n\u003cbr\u003e\n\n### Include locally:\n\u003chr\u003e\n\nDownload `accessible-reset.bundle.js` from the root of [this](https://github.com/matssom/accessible-reset.git) repository.\n\nLink to the file locally in the head of your `index.html` file:\n\n```html\n\u003chead\u003e\n    ...\n\n    \u003cscript src=\"./path/to/accessible-reset.bundle.js\"\u003e\u003c/script\u003e\n    \n    ...\n\u003c/head\u003e\n```\n\n\u003cbr\u003e\n\n:exclamation: **Note:**\nYou 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 `\u003cbody\u003e` 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.\n\n```html\n\u003chead\u003e\n    ...\n    \n    \u003clink rel=\"stylesheet\" href=\"./path/to/accessible-reset.css\"\u003e\n    \n    ...\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n\n    \u003cscript src=\"./path/to/accessible-reset.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatssom%2Faccessible-reset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatssom%2Faccessible-reset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatssom%2Faccessible-reset/lists"}