What is Amidst?
Amidst 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 amidst 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 Amidst, but here are a few things Amidst 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 = 10pxwithout disturbing the accessability features of the user agent stylesheet. This enables developers to calculate relative font-sizes much easier. (1.8rem = 18pxetc...)
For more information, look at the fully commented amidst.css file in the src foler of this repository.
Installation
⚠️ WARNING:
This library is still in early development and current features may brake in future updates.
Amidst 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.
❗️ Note:
Amidst works with normalize.css, but include normalize.css first for the best results.
With npm:
Install the package:
npm install amidst --saveImport the package in your root index.js file:
;❗️ Note: If you want to minimize the file footprint (2kb instead of 6kb), you can include the js and css separately:
;Include locally:
Download amidst.bundle.js from the root of this repository.
Link to the file locally in the head of your index.html file:
... ...❗️ Note:
You can optionally download and include the stylesheet amidst.css in the head of your index.html and include the amidst.js file to the bottom of the <body> tag if you have problems with flashes of unstyled content or want a smaller file footprint (2kb instead of 6kb). By default, the stylesheet is included in the script tag.
... ... ...