Use font-size() as alias for rfs()

5 files changed, 39 insertions, 24 deletions

diff --git a/LICENSE b/LICENSE
index 6cbe498..c997f9f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 MartijnCuppens
+Copyright (c) 2017 Martijn Cuppens
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 0d5fb0f..415a9a0 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,17 @@
 # RFS [![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.
+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.
 
 
 ## 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
-- **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
+- 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.
+- **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.
+
 
 ![RFS](http://i.imgur.com/gJH6m6g.gif)
 
@@ -35,16 +38,15 @@ $ bower install rfs --save
 
 **Copy/paste (not recommended):**
 
-You can download the RFS SCSS-file and save it in your `scss/` directory. This
-method is not recommended because you lose the ability to easily and quickly
-manage and update RFS as a dependency.
+You can download the RFS SCSS-file and save it in your `scss/` directory. This method is not recommended because you 
+lose the ability to easily and quickly manage and update RFS as a dependency.
 
 
 ## Usage
 This input (SCSS):
 ```scss
 .title {
-  @include rfs(62);
+  @include font-size(62);
 }
 ```
 
@@ -60,19 +62,21 @@ Will generate this (CSS):
   }
 }
 ```
-In this case a value without unit was passed to RFS (`62`), which is interpreted as `62px`. It's also possible to pass
-font-sizes in rem-units.
+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()`.
 
 
 ## Configuration
 
 ![RFS visualisation](https://i.imgur.com/9t4gAzE.png)
 
-There are configuration variables which influence the calculation of the font size. In the graph above, `$rfs-minimum-font-size` is set to `14px`, `$rfs-breakpoint` is set to `1200px`, and `$rfs-factor` is set to `5`, this is the default configuration.
+There are configuration variables which influence the calculation of the font size. In the graph above the default 
+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): `rfs(19)` will trigger dynamic rescaling, with `rfs(10)` it will just stay `10px` all the time.  
+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.  
 *Default value: `14px`*
 
 **$rfs-minimum-font-size-unit:** (string)  
@@ -80,7 +84,8 @@ The font size will be rendered in this unit. Possible units are `px` and `rem`.
 *Default value: `px`*
 
 **$rfs-breakpoint:** (in `px`, `em` or `rem`)  
-Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the font will dynamically scale.    
+Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the 
+font size will dynamically scale.    
 *Default value: `1200px`*
 
 **$rfs-breakpoint-unit:** (string)  
@@ -88,17 +93,22 @@ The width of `$rfs-breakpoint` will be rendered in this unit. Possible units are
 *Default value: `px`*
 
 **$rfs-factor:** (number)  
-This value determines the strength of font size resizing. 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.  
+This value determines the strength of font size resizing. 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. `$rfs-factor` must me greater than 1, setting it to 1 will disable dynamic rescaling.    
 *Default value: `5`*
 
 **$rfs-two-dimensional** (Boolean)  
-Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with `vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode.  
+Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with
+`vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode.  
 *Default value: `false`*
 
-## Do's and don'ts
-- Remember to set rfs on your font-size of your `html` or `body`, otherwise some text may not dynamically rescale
-- Always set your line-heights relative (in `em` or unitless)
-- More tips and tricks with examples can be found [on this article](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6)
+## Best practices
+- Remember to set RFS on your font-size of your `html` or `body`, otherwise some text may not dynamically rescale. Note
+that setting RFS on `html` will influence the value of `rem`.
+- Always set your line-heights relative (in `em` or unitless).
+- More tips and tricks with examples can be found
+[on this article](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6).
 
 ##  Demos
 - [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy)
diff --git a/bower.json b/bower.json
index 13a3f47..d88d2a1 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "rfs",
   "description": "A scss-mixin for responsive font-sizes.",
-  "main": "scss/rfs.scss",
+  "main": "scss/_rfs.scss",
   "authors": [
     "Martijn Cuppens <martijn.cuppens@gmail.com>"
   ],
diff --git a/package.json b/package.json
index ca19d78..3bad210 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "rfs",
   "version": "4.4.0",
   "description": "A scss-mixin for responsive font-sizes.",
-  "main": "scss/rfs.scss",
+  "main": "scss/_rfs.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/scss/_rfs.scss b/scss/_rfs.scss
index 791a9f8..aa25144 100644
--- a/scss/_rfs.scss
+++ b/scss/_rfs.scss
@@ -1,3 +1,8 @@
+// The font-size mixin uses RFS to rescale font sizes.
+@mixin font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
 // RFS mixin.
 //
 // Automated font-resizing.