Merge pull request #7 from matssom/minify

Minify
matssom · Oct 31, 2020 · ea63e3b · ea63e3b
2 parents 6a7b19a + 836969d
commit ea63e3b
Show file tree

Hide file tree

Showing 14 changed files with 2,065 additions and 219 deletions.
diff --git a/README.md b/README.md
@@ -2,31 +2,31 @@
 
 ## What is Amidst?
 
-Amidst is a styling library that makes your webapps more accessible and consistent with only 1 line of code. Amidst will also **(in the future)** expose styling tools and classes that you can take advantage of to achieve a more responsive, accessible and consistent look across your app.
+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.
 
 <br>
 
-## What do I need to know?
+## 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-with from jumping when moving from a non-scrollable page to a scrollable one. This issue mostly affects windows users.
+- 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 `amidst.css` file in the root of [this](https://github.com/matssom/amidst.git) repository.
+For more information, look at the fully commented `amidst.css` file in the `src` foler of [this](https://github.com/matssom/amidst.git) repository.
 
 <br>
 
 ## Installation
 <hr>
 
 :warning: **WARNING:**
-> This library is in very early development and current features may brake in future updates.
+> This library is still in early development and current features may brake in future updates.
 
 <br>
 
-Amidst can be used on static and dynamic pages. The library was designed with `react` in mind; however, does not depend on it.
+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.
 
 <br>
 
@@ -40,30 +40,39 @@ Amidst works with `normalize.css`, but include `normalize.css` **first** for the
 
 Install the package:
 
-```.js
+```js
 npm install amidst --save
 ```
 
 Import the package in your root `index.js` file:
 
-```.js 
-import amidst from 'amidst';
+```js 
+import { amidstBundle } from 'amidst';
 ```
 
+:exclamation: **Note:**
+If you want to minimize the file footprint (2kb instead of 6kb), you can include the js and css separately:
+
+```js
+import { amidstCSS, amidstJs } from 'amidst';
+```
+
+
+
 <br>
 
 ### Include locally:
 <hr>
 
-Download `amidst.js` from the root of [this](https://github.com/matssom/amidst.git) repository.
+Download `amidst.bundle.js` from the root of [this](https://github.com/matssom/amidst.git) repository.
 
 Link to the file locally in the head of your `index.html` file:
 
-```.html
+```html
 <head>
  ...
 
- <script src="./path/to/amidst.js"></script>
+ <script src="./path/to/amidst.bundle.js"></script>
 
  ...
 </head>
@@ -72,9 +81,9 @@ Link to the file locally in the head of your `index.html` file:
 <br>
 
 :exclamation: **Note:**
-You can optionally download and include the stylesheet in the head of your `index.html` and move the `amidst.js` file to the bottom of the `<body>` tag if you have problems with [flashes of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). By default, the stylesheet is included in the script tag.
+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](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
+```html
 <head>
  ...
 
@@ -88,8 +97,3 @@ You can optionally download and include the stylesheet in the head of your `inde
  <script src="./path/to/amidst.js"></script>
 </body>
 ```
-<br>
-
-## Configuration
-
-There will come configuration options for sertain styles and behaviours in the future.
diff --git a/amidst.bundle.js b/amidst.bundle.js
diff --git a/amidst.css b/amidst.css