README.md: Markdown tweaks

1 files changed, 53 insertions, 26 deletions

diff --git a/README.md b/README.md
index 8b526a8..6c961f0 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
 # RFS [![npm][npm-image]][npm-url]
-[npm-image]: https://img.shields.io/npm/v/rfs.svg
-[npm-url]: https://npmjs.org/package/rfs
 
-> RFS (abbreviation for responsive font size) is an algorithm which **automatically calculates the appropriate font size** based on the dimensions of the browser viewport. It's available in 5 languages: 
+> RFS (abbreviation for responsive font size) is an algorithm which **automatically calculates the appropriate font size** based on the dimensions of the browser viewport. It's available in 5 languages:
 > - [SCSS](http://sass-lang.com/)
 > - [Sass](http://sass-lang.com/)
 > - [PostCSS](http://postcss.org/)
@@ -10,9 +8,9 @@
 > - [Stylus](http://stylus-lang.com/)
 
 ## Advantages
+
 - Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the viewport on small devices.
-- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can
-be assured.
+- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can be assured.
 - **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.
 
@@ -20,23 +18,24 @@ be assured.
 ![RFS](http://i.imgur.com/gJH6m6g.gif)
 
 ## Installation
+
 RFS can be installed using a package manager (recommended):
 
 **npm:**
 
-```
+```sh
 $ npm install rfs --save
 ```
 
 **yarn:**
 
-```
+```sh
 $ yarn add rfs
 ```
 
 **Bower:**
 
-```
+```sh
 $ bower install rfs --save
 ```
 
@@ -47,7 +46,9 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
 
 
 ## Usage
+
 ### SCSS
+
 ```scss
 .title {
   @include responsive-font-size(4rem); // OR @include responsive-font-size(64px); OR @include rfs(64);
@@ -55,12 +56,14 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
 ```
 
 ### Sass
+
 ```sass
 .title
   +responsive-font-size(4rem) // OR +responsive-font-size(64px) OR +rfs(64)
 ```
 
 ### PostCSS
+
 ```postcss
 .title {
   responsive-font-size: 4rem; // OR responsive-font-size: 64px; OR rfs: 64;
@@ -68,6 +71,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
 ```
 
 ### Less
+
 ```less
 .title {
   .responsive-font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64);
@@ -75,11 +79,14 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
 ```
 
 ### Stylus
+
 ```stylus
 .title
   responsive-font-size(4rem) // OR responsive-font-size(64px) OR rfs(64)
 ```
+
 ### Generated css
+
 ```css
 .title {
   font-size: 4rem;
@@ -91,11 +98,13 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
   }
 }
 ```
+
 ## Configuration
 
 ![RFS visualisation](https://i.imgur.com/yaOonFe.png)
 
-### Minimum font size <sub><sup>(unit in `px` or `rem`)</sup></sub> ###
+### Minimum font size <sub><sup>(unit in `px` or `rem`)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-minimum-font-size`  
 > **Less:** `@rfs-minimum-font-size`  
 > **PostCSS:** `minimumFontSize`  
@@ -104,7 +113,8 @@ The option will prevent the font size from becoming too small on smaller screens
 *Default value: `1rem`*
 
 
-### Font size unit <sub><sup>(`px` or `rem`)</sup></sub> ###
+### Font size unit <sub><sup>(`px` or `rem`)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-font-size-unit`  
 > **Less:** `@rfs-font-size-unit`  
 > **PostCSS:** `fontSizeUnit`  
@@ -113,7 +123,8 @@ The output font size will be rendered in this unit.
 *Default value: `rem`*
 
 
-### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub> ###
+### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-breakpoint`  
 > **Less:** `@rfs-breakpoint`  
 > **PostCSS:** `breakpoint`  
@@ -122,7 +133,8 @@ Above this breakpoint, the font size will be equal to the font size you passed t
 *Default value: `1200px`*
 
 
-### Breakpoint unit <sub><sup>(`px`, `em` or `rem`)</sup></sub> ###
+### Breakpoint unit <sub><sup>(`px`, `em` or `rem`)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-breakpoint-unit`  
 > **Less:** `@rfs-breakpoint-unit`  
 > **PostCSS:** `breakpointUnit`  
@@ -131,7 +143,8 @@ The width of the max width in the media query will be rendered in this unit.
 *Default value: `px`*
 
 
-### Factor <sub><sup>(number)</sup></sub> ###
+### Factor <sub><sup>(number)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-factor`  
 > **Less:** `@rfs-factor`  
 > **PostCSS:** `factor`  
@@ -140,7 +153,8 @@ This value determines the strength of font size resizing. The higher the factor,
 *Default value: `5`*
 
 
-### Two dimensional <sub><sup>(boolean)</sup></sub> ###
+### Two dimensional <sub><sup>(boolean)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-two-dimensional`  
 > **Less:** `@rfs-two-dimensional`  
 > **PostCSS:** `twoDimensional`  
@@ -149,23 +163,26 @@ Enabling the two dimensional media queries will determine the font size based on
 *Default value: `false`*
 
 
-### Class <sub><sup>(boolean)</sup></sub> ###
+### Class <sub><sup>(boolean)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-class`  
 > **Less:** `@rfs-class`  
 > **PostCSS:** `class`  
 
-RFS can ben enabled or disabled with a class. There are 3 options:  
-- `disable`  
-When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to disable responsive font sizes for the element and its child elements.  
-- `enable`  
-RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements.  
-- `false`  
-No extra classes are generated.  
+RFS can be enabled or disabled with a class. There are 3 options:
+  
+- `disable`
+  When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to disable responsive font sizes for the element and its child elements.  
+- `enable`
+  RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements.  
+- `false`
+  No extra classes are generated.  
 
 *Default value: `false`*
 
 
-### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub> ###
+### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub>
+
 > **SCSS, Sass & Stylus:** `$rfs-safari-iframe-resize-bug-fix`  
 > **Less:** `@rfs-safari-iframe-resize-bug-fix`  
 > **PostCSS:** `safariIframeResizeBugFix`  
@@ -176,6 +193,7 @@ Safari doesn't resize its font size in an iframe if the iframe is resized. To fi
 
 
 ## !important
+
 By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`)
 
 ```scss
@@ -185,6 +203,7 @@ By setting a second parameter to true, `!important` is added after the font-size
 ```
 
 CSS:
+
 ```css
 .label {
   font-size: 2.5rem !important;
@@ -198,19 +217,27 @@ CSS:
 ```
 
 ## Best practices
+
 - Remember to set RFS on your font size of your `html` or `body` (especially if the minimum font size is lowered), otherwise some text may not dynamically rescale. Note that setting RFS on `html` can influence the value of `rem`.
 - Always set your line-heights relative (in `em` or unitless).
-- More tips and tricks with examples can be found
-[here](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6) (written when only the SCSS version was made).
+- More tips and tricks with examples can be found [here](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6) (written when only the SCSS version was made).
+
+## Demos
 
-##  Demos
 - [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy)
 - [RFS in bootstrap demo](http://martijncuppens.github.io/rfs)
 
 ## Creator
+
 **Martijn Cuppens**
+
 * <https://twitter.com/Martijn_Cuppens>
 * <https://github.com/MartijnCuppens>
 
 ## Copyright and license
+
 Code released under [the MIT license](https://github.com/project-rfs/rfs/blob/master/LICENSE).
+
+
+[npm-image]: https://img.shields.io/npm/v/rfs.svg
+[npm-url]: https://npmjs.org/package/rfs