Update documentation

1 files changed, 54 insertions, 20 deletions

diff --git a/README.md b/README.md
index 91ad328..c74665c 100644
--- a/README.md
+++ b/README.md
@@ -33,20 +33,7 @@ method is not recommended because you lose the ability to easily and quickly
 manage and update RFS as a dependency.
 
 
-## The main advantages of using RFS
-- Font-sizes will rescale for every screen width, this prevents long words from being chopped off the screen
-- Super easy to use, no need to define complex configurations for each font-size
-- Font-sizes of all text-elements will always remain in relation with each other
-- Rem-based font-sizes will allow the user to change his default font-size in his browser. People with limited vision can therefore set their font-size bigger to increase readability.
-
-## How does it work?
-The algorithm splits the calculation of the font-size in 2:
-
-- 1 Static font-size for bigger screens
-- 1 adaptive font-size which decreases when the screen-width of your browser decreases. This font-size is calculated in a media-query with css’ calc-function.
-There are some configuration variables which can influence the font-size decreasing.
-
-## The code
+## Usage
 This input (SCSS):
 ```scss
 .title {
@@ -66,11 +53,58 @@ Will generate this (CSS):
   }
 }
 ```
-## Live demo
-http://codepen.io/MartijnCuppens/pen/ZBjdMy
 
-## Bootstrap demo
-https://www.intracto.com/bootstrap-with-rfs
+## Advantages
+- Font sizes will *rescale for every screen width*, this prevents long words from being chopped off the screen
+- *Super easy* to use, no need to define complex configurations for each font-size
+- Font sizes of all text elements will always remain in relation with each other
+- Rem-based font sizes will allow the user to change his default font size in his browser. People with limited vision can therefore increase their font size to increase readability.
+
+## How does it work?
+RFS splits the calculation of the font-size in two:
+
+- 1 Static font-size for bigger screens
+- 1 adaptive font size which decreases along with the screen width of your browser. This font size is calculated in a media query with css’s calc-function.
+There are some configuration variables which can influence the font-size decreasing.
+
+## Configuration
+![RFS visualisation](http://i.imgur.com/KpcsXUk.png)
+
+There are configuration variables which influence the calculation of the font size. All variables must be set unitless in the configuration:
+
+**$rfs-minimum-font-size:** (in `px`)  
+Font sizes which are calculated by RFS will never be lower than this size.
+However, you can still pass a smaller font size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): `rfs(17)` will trigger dynamic rescaling, with `rfs(10)` it will just stay `10px` all the time.  
+Default value: `12`
+
+**$rfs-minimum-font-size-unit:** (string)  
+The font size will be rendered in this unit. Possible units are `px` and `rem`. This setting doesn't influence `$rfs-minimum-font-size`, which will always be configured in `px`.  
+Default value: `rem`
+
+**$rfs-breakpoint:** (in `px`)  
+This where dynamic rescaling begins. Above this breakpoint, the font size will be equal to the font size you passed to the mixin.  
+*Default value: `1200`*
+
+**$rfs-breakpoint-unit:** (string)  
+The width of `$rfs-breakpoint` will be rendered in this unit. Possible units are `px`, `em` and `rem`. This setting doesn't influence `$rfs-breakpoint`, which will always be configured in `px`.  
+*Default value: `px`*
+
+**$rfs-factor:** (number)  
+This is the more complex part. If the font sizes would all resize to the same value when the screen width would be 0, there wouldn’t be a lot of difference between the font sizes on small screens. To prevent this, we brought the `$rfs-factor` to life.  
+Let’s take an example from the graph above: The font size `rfs(47)` at a screen of `0px` is `19px` and not `16px` because of this factor. This minimum font size is calculated like this:
+
+Calculate the difference between the font-size (47) and `$rfs-minimum-font-size` (12)  
+`47 - 12 = 35`  
+
+Divide this number by the $rfs-factor (5)  
+`35 / 5 = 7`   
+
+Add this number to $rfs-minimum-font-size (12)  
+`7 + 12 = 19`  
+
+The higher `$rfs-factor`, the less difference there is between font sizes on small screens. The lower `$rfs-factor`, the less influence RFS has, which results in bigger font sizes for small screens. If `$rfs-factor` is set to 1, there wouldn’t be any difference at all. 1 is the lowest possible value.  
+*Default value: `5`*
 
-## RFS explained in detail
-https://blog.intracto.com/rfs-automated-scss-responsive-font-sizing
+##  Demos
+- [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy)
+- [RFS in bootstrap demo](http://martijncuppens.github.io/rfs)