rfs - npm Package Compare versions
Comparing version 4.0.0 to 4.1.0
| { | ||
| "name": "rfs", | ||
| "version": "4.0.0", | ||
| "version": "4.1.0", | ||
| "description": "A scss-mixin for responsive font-sizes.", | ||
@@ -5,0 +5,0 @@ "main": "scss/rfs.scss", |
@@ -64,9 +64,10 @@ # RFS [![npm][npm-image]][npm-url] | ||
| ## 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 `12`, `$rfs-breakpoint` is set to `1200`, and `$rfs-factor` is set to `5`. | ||
|  | ||
| 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. | ||
| **$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(17)` will trigger dynamic rescaling, with `rfs(10)` it will just stay `10px` all the time. | ||
| 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. | ||
| *Default value: `14px`* | ||
@@ -88,6 +89,6 @@ | ||
| 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(47)` at a screen of `0px` is `19px` and not `16px` because of this factor. This minimum font size is calculated like this: | ||
| 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` (12) | ||
| `47 - 12 = 35` | ||
| Calculate the difference between the font-size (47) and `$rfs-minimum-font-size` (14) | ||
| `49 - 14 = 35` | ||
@@ -97,4 +98,4 @@ Divide this number by the `$rfs-factor` (5) | ||
| Add this number to $rfs-minimum-font-size (12) | ||
| `7 + 12 = 19` | ||
| Add this number to $rfs-minimum-font-size (14) | ||
| `7 + 14 = 21` | ||
@@ -101,0 +102,0 @@ 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. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.27%
58276
- Number of lines in readme file
- increased by0.96%
105