Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rfs

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rfs - npm Package Compare versions

Comparing version 5.0.2 to 6.0.0

2

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc