Comparing version 5.0.2 to 6.0.0
{ | ||
"name": "rfs", | ||
"version": "5.0.2", | ||
"version": "6.0.0", | ||
"description": "A scss-mixin for responsive font-sizes.", | ||
@@ -5,0 +5,0 @@ "main": "scss/_rfs.scss", |
@@ -1,7 +0,10 @@ | ||
# 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). | ||
@@ -11,3 +14,4 @@ ## Advantages | ||
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. | ||
@@ -50,3 +54,3 @@ - Font sizes of all text elements will always remain in relation with each other. | ||
.title { | ||
@include font-size(62); | ||
@include responsive-font-size(62); | ||
} | ||
@@ -68,3 +72,4 @@ ``` | ||
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. | ||
@@ -74,3 +79,3 @@ | ||
![RFS visualisation](https://i.imgur.com/9t4gAzE.png) | ||
![RFS visualisation](https://i.imgur.com/ImJ17Im.png) | ||
@@ -82,7 +87,7 @@ There are configuration variables which influence the calculation of the font size. In the graph above the default | ||
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`. | ||
@@ -89,0 +94,0 @@ *Default value: `px`* |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
59653
121