Use correct configuration name for $rfs-font-size-unit; update documentation; version updatev6.0.0

4 files changed, 35 insertions, 27 deletions

diff --git a/README.md b/README.md
index fa067cc..61c70b0 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,18 @@
-# RFS [![npm][npm-image]][npm-url]
+# RFS mixin[![npm][npm-image]][npm-url]
 [npm-image]: https://img.shields.io/npm/v/rfs.svg
 [npm-url]: https://npmjs.org/package/rfs
-RFS stands for Responsive Font Size and is an easy to use **SCSS-mixin** which **automatically calculates the 
-appropriate font size** based on the dimensions of the monitor or device.
+> This package lets you use the `responsive-font-size` mixin which **automatically calculates the appropriate font 
+size** based on the dimensions of the monitor or device.
 
+## What is RFS?
+RFS (abbreviation for responsive font size) is the name of the algorithm behind the mixin. It's also used by 
+[PostCSS RFS](https://github.com/MartijnCuppens/postcss-rfs).
 
 ## Advantages
 - Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen on 
 mobile devices.
-- The minimum font size 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.
 
@@ -46,7 +50,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
 This input (SCSS):
 ```scss
 .title {
-  @include font-size(62);
+  @include responsive-font-size(62);
 }
 ```
 
@@ -63,7 +67,8 @@ Will generate this (CSS):
 }
 ```
 In this case a value without unit was passed to the mixin (`62`), which is interpreted as `62px`. It's also possible to 
-pass font sizes in rem-units. Since v5.0.0 `font-size()` is added as an alias for `rfs()`.
+pass font sizes in rem-units. You can also use `rfs()` instead of `responsive-font-size()` which is a bit 
+shorter to type.
 
 
 ## Configuration
@@ -75,11 +80,11 @@ configuration is used.
 
 **$rfs-minimum-font-size:** (in `px` or `rem`)  
 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): `font-size(19)` will 
-trigger dynamic rescaling, with `font-size(10)` it will just stay `10px` all the time.  
+size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): `responsive-font-size(19)` will 
+trigger dynamic rescaling, with `responsive-font-size(10)` it will just stay `10px` all the time.  
 *Default value: `14px`*
 
-**$rfs-minimum-font-size-unit:** (string)  
+**$rfs-font-size-unit:** (string)  
 The font size will be rendered in this unit. Possible units are `px` and `rem`.   
 *Default value: `px`*
 
diff --git a/package.json b/package.json
index 8f3bab1..da6ba95 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rfs",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "A scss-mixin for responsive font-sizes.",
   "main": "scss/_rfs.scss",
   "scripts": {
diff --git a/rfs.svg b/rfs.svg
index c6da528..6ff31f5 100644
--- a/rfs.svg
+++ b/rfs.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 402"><path fill="#F36" d="M3 301.17l346-200.34v200.34L175.5 401.34"/><path fill="#28B3EE" d="M3 301.17V100.83L175.1.66 349 100.83"/><path fill="#FFF" d="M100.44 212.7c11.33-2.68 23.13-12.42 23.13-30.83 0-8.27-2.43-15.44-6.9-21.15-1.52-1.95-3.28-2.8-5.25-4.35-5.9-4.6-13.8-6.37-23.25-6.37H38v102h23v-35h16.8l20.6 35h25.8l-23.76-39.3zM85.02 196H61v-30h24.02c8.82 0 15.58 6.2 15.58 14.84 0 8.97-6.76 15.16-15.58 15.16zm55.23 57.3V148.38h74.26v19.67h-51.9v22.03h50.8v19.67h-50.8v43.57h-22.33zm82.6-14.77l12.27-17.47c7.4 7.7 18.88 14.32 33.36 14.32 12.43 0 18.25-5.5 18.25-11.65 0-18.25-60.42-5.5-60.42-45 0-17.46 15.14-31.93 39.84-31.93 16.67 0 30.52 5.04 40.9 14.63L294.6 178.1c-8.5-7.86-19.83-11.48-30.53-11.48-9.44 0-14.78 4.1-14.78 10.4 0 16.5 60.22 5.34 60.22 44.5 0 19.2-13.84 33.68-42 33.68-20.3 0-34.78-6.76-44.7-16.67z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 402" width="350" height="402"><path fill="#F36" d="M3 301.17l346-200.34v200.34L175.5 401.34"/><path fill="#28B3EE" d="M3 301.17V100.83L175.1.66 349 100.83"/><path fill="#FFF" d="M100.44 212.7c11.33-2.68 23.13-12.42 23.13-30.83 0-8.27-2.43-15.44-6.9-21.15-1.52-1.95-3.28-2.8-5.25-4.35-5.9-4.6-13.8-6.37-23.25-6.37H38v102h23v-35h16.8l20.6 35h25.8l-23.76-39.3zM85.02 196H61v-30h24.02c8.82 0 15.58 6.2 15.58 14.84 0 8.97-6.76 15.16-15.58 15.16zm55.23 57.3V148.38h74.26v19.67h-51.9v22.03h50.8v19.67h-50.8v43.57h-22.33zm82.6-14.77l12.27-17.47c7.4 7.7 18.88 14.32 33.36 14.32 12.43 0 18.25-5.5 18.25-11.65 0-18.25-60.42-5.5-60.42-45 0-17.46 15.14-31.93 39.84-31.93 16.67 0 30.52 5.04 40.9 14.63L294.6 178.1c-8.5-7.86-19.83-11.48-30.53-11.48-9.44 0-14.78 4.1-14.78 10.4 0 16.5 60.22 5.34 60.22 44.5 0 19.2-13.84 33.68-42 33.68-20.3 0-34.78-6.76-44.7-16.67z"/></svg>
diff --git a/scss/_rfs.scss b/scss/_rfs.scss
index aa25144..789d23d 100644
--- a/scss/_rfs.scss
+++ b/scss/_rfs.scss
@@ -1,7 +1,4 @@
-// The font-size mixin uses RFS to rescale font sizes.
-@mixin font-size($fs, $important: false) {
-  @include rfs($fs, $important);
-}
+// stylelint-disable declaration-property-value-blacklist
 
 // RFS mixin.
 //
@@ -9,18 +6,11 @@
 //
 // See https://github.com/MartijnCuppens/rfs.
 
-// Disable RFS by setting $enable-responsive-font-sizes to false.
-$enable-responsive-font-sizes: true !default;
-@if $enable-responsive-font-sizes == false {
-  // If $rfs-factor is set to 1, fluid font-resizing is disabled.
-  $rfs-factor: 1;
-}
-
 // Configuration.
 
 // Minimum fontsize.
 $rfs-minimum-font-size: 14px !default;
-$rfs-minimum-font-size-unit: px !default;
+$rfs-font-size-unit: px !default;
 
 // Breakpoint at where font-size starts decreasing if screen width is smaller.
 $rfs-breakpoint: 1200px !default;
@@ -35,6 +25,13 @@ $rfs-factor: 5 !default;
 // 1 rem = $rfs-rem-value px.
 $rfs-rem-value: 16 !default;
 
+// Disable RFS by setting $enable-responsive-font-sizes to false.
+$enable-responsive-font-sizes: true !default;
+@if $enable-responsive-font-sizes == false {
+  // If $rfs-factor is set to 1, fluid font-resizing is disabled.
+  $rfs-factor: 1;
+}
+
 // Remove px-unit from $rfs-minimum-font-size for calculations.
 @if unit($rfs-minimum-font-size) == "px" {
   $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1);
@@ -75,12 +72,12 @@ $rfs-rem-value: 16 !default;
     }
 
     // Set default font-size.
-    @if $rfs-minimum-font-size-unit == rem {
+    @if $rfs-font-size-unit == rem {
       $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
-    } @else if $rfs-minimum-font-size-unit == px {
+    } @else if $rfs-font-size-unit == px {
       $rfs-static: #{$fs}px#{$rfs-suffix};
     } @else {
-      @error "`#{$rfs-minimum-font-size-unit}` is not a valid unit for $rfs-minimum-font-size-unit. Use `px` or `rem`.";
+      @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
     }
 
     @if type-of($rfs-factor) != "number" or $rfs-factor < 1 {
@@ -100,7 +97,7 @@ $rfs-rem-value: 16 !default;
 
       // Minimum font-size formatting.
       // No need to check if the unit is valid, because we did that before.
-      @if $rfs-minimum-font-size-unit == rem {
+      @if $rfs-font-size-unit == rem {
         $min-width: #{$fs-min / $rfs-rem-value}rem;
       } @else {
         $min-width: #{$fs-min}px;
@@ -150,3 +147,9 @@ $rfs-rem-value: 16 !default;
     }
   }
 }
+
+// The responsive-font-size mixin uses RFS to rescale font sizes.
+@mixin responsive-font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+