rfs - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

package.json

 {
   "name": "rfs",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "A scss-mixin for responsive font-sizes.",
@@ -5,0 +5,0 @@ "main": "scss/rfs.scss",

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, easy to remember, easy to use. This approach **automatically calculates the correct font-size** for every screen width. You just have got to define your font-size for big screens and the font-size will automatically decrease for smaller screens. RFS is a **SCSS-mixin** which generates the responsive css for you.
+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
+
 ![RFS](http://i.imgur.com/gJH6m6g.gif)
@@ -56,8 +63,5 @@
 ```
+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.
 
-## 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.
 
@@ -68,3 +72,3 @@ ## Configuration
 
-There are configuration variables which influence the calculation of the font size. If no unit is used, `px`-units will be assumed as unit. In the graph above, `$rfs-minimum-font-size` is set to `14`, `$rfs-breakpoint` is set to `1200`, 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, `$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.
 
@@ -81,3 +85,3 @@ **$rfs-minimum-font-size:** (in `px` or `rem`)
 **$rfs-breakpoint:** (in `px`, `em` or `rem`)  
-This is the point where dynamic rescaling begins. Above this breakpoint, the font size will be equal to the font size you passed to the mixin.    
+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.    
 *Default value: `1200px`*
@@ -90,25 +94,13 @@
 **$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(49)` at a screen of `0px` is `21px` 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` (14)  
-`49 - 14 = 35`  
-
-Divide this number by the `$rfs-factor` (5)  
-`35 / 5 = 7`   
-
-Add this number to $rfs-minimum-font-size (14)  
-`7 + 14 = 21`  
-
-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. 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-mobile-first** (Boolean)  
-Use mobile first rendering, enabling this can cause legacy browsers which doesn't support vw-units to incorrectly render the font-size.  
-*Default value: `false`*
-
 **$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)
 
@@ -115,0 +107,0 @@ ##  Demos

No alert changes

Worsened metrics

Total package byte prevSize

57835

decreased by-1.95%

Number of lines in readme file

106

decreased by-7.02%

No dependency changes