rfs - npm Package Compare versions

Comparing version 4.4.0 to 5.0.0

bower.json

 {
   "name": "rfs",
   "description": "A scss-mixin for responsive font-sizes.",
-  "main": "scss/rfs.scss",
+  "main": "scss/_rfs.scss",
   "authors": [
@@ -6,0 +6,0 @@ "Martijn Cuppens <[e-mail]>"

package.json

 {
   "name": "rfs",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "description": "A scss-mixin for responsive font-sizes.",
-  "main": "scss/rfs.scss",
+  "main": "scss/_rfs.scss",
   "scripts": {
@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

README.md

 # 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)
@@ -38,5 +41,4 @@
 
-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.
 
@@ -48,3 +50,3 @@
 .title {
-  @include rfs(62);
+  @include font-size(62);
 }
@@ -65,4 +67,4 @@ ```
 ```
-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()`.
 
@@ -74,7 +76,9 @@
 
-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`*
@@ -87,3 +91,4 @@
 **$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`*
@@ -96,13 +101,18 @@
 **$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).
 
@@ -109,0 +119,0 @@ ##  Demos

No alert changes

Improved metrics

Total package byte prevSize

58525

increased by1.19%

Number of lines in readme file

116

increased by9.43%

No dependency changes