rfs - npm Package Compare versions

Comparing version 7.1.9 to 8.0.0

package.json

 {
   "name": "rfs",
-  "version": "7.1.9",
-  "main": "postcss/rfs.js",
-  "description": "Powerfull & easy-to-use responsive font sizing system.",
+  "version": "8.0.0",
+  "main": "postcss.js",
+  "description": "Powerful & easy-to-use responsive font sizing engine.",
   "files": [
-    "less/rfs.less",
-    "postcss/rfs.js",
-    "sass/_rfs.sass",
-    "scss/_rfs.scss",
-    "stylus/rfs.styl"
+    "less.less",
+    "postcss.js",
+    "sass.sass",
+    "scss.scss",
+    "stylus.styl"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "codepen": "browserify postcss/codepen.js | babel --presets=env | uglifyjs --compress --mangle > postcss/codepen.bundle.js",
-    "gulp-examples": "cd examples/less/gulp && gulp build && cd ../../postcss/gulp && gulp build && cd ../../sass/gulp && gulp build && cd ../../scss/gulp && gulp build && cd ../../stylus/gulp && gulp build && cd ../../../..",
-    "node-examples": "node examples/less/node/index.js && node examples/postcss/node/index.js && node examples/sass/node/index.js && node examples/scss/node/index.js && node examples/stylus/node/index.js"
+    "test": "mocha",
+    "generate-test-results": "node-sass test/sass/ -o test/result/",
+    "gulp-examples": "cd examples/less/gulp && gulp build && cd ../../postcss/gulp && gulp build && cd ../../sass/gulp && gulp build && cd ../../stylus/gulp && gulp build && cd ../../../..",
+    "node-examples": "node examples/less/node/index.js && node examples/postcss/node/index.js && node examples/sass/node/index.js && node examples/stylus/node/index.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
+  },
   "repository": {
@@ -49,9 +54,12 @@ "type": "git",
     "gulp-stylus": "^2.7.0",
-    "less": "^3.8.1",
-    "node-sass": "^4.10.0",
-    "postcss": "^7.0.6",
-    "postcss-nested": "^4.1.0",
+    "husky": "^1.3.1",
+    "less": "^3.9.0",
+    "mocha": "^5.2.0",
+    "node-sass": "^4.11.0",
+    "postcss": "^7.0.14",
+    "postcss-nested": "^4.1.1",
     "postcss-prettify": "^0.3.4",
-    "stylelint": "^9.8.0",
-    "stylelint-scss": "^3.4.0",
+    "prettier": "^1.16.4",
+    "stylelint": "^9.10.1",
+    "stylelint-scss": "^3.5.3",
     "stylus": "^0.54.5",
@@ -58,0 +66,0 @@ "uglify-js": "^3.4.9"

README.md

@@ -1,21 +0,36 @@
-# RFS [![npm][npm-image]][npm-url]
+<p align="center">
+  <img src="https://raw.githubusercontent.com/twbs/rfs/master/rfs.svg?sanitize=true" alt="RFS logo" width="99" height="108.6">
+</p>
 
-RFS (abbreviation for responsive font size) is an algorithm which **automatically calculates the appropriate font size** based on the dimensions of the browser viewport. It's available in 5 languages:
+<p  align="center">
+  RFS (simply the abbreviation for Responsive Font Size) is a font size engine which <strong>automatically calculates the appropriate font size</strong> based on the dimensions of the browser viewport. It's available in one of your favourite preprocessors or postprocessor: <a href="https://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, <a href="http://stylus-lang.com/">Stylus</a> or <a href="https://postcss.org/">PostCSS</a>.
+</p>
 
-- [SCSS](https://sass-lang.com/)
-- [Sass](https://sass-lang.com/)
-- [PostCSS](https://postcss.org/)
-- [Less](http://lesscss.org/)
-- [Stylus](http://stylus-lang.com/)
+# RFS
 
-## Advantages
+[![npm][npm-image]][npm-url]
+[![licence][licence-image]][license-url]
+[![build][build-image]][build-url]
 
-- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the viewport on small devices.
-- 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.
-- Font sizes of all text elements will always remain in relation with each other.
+- [How does it work?](#how-does-it-work)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Visualisation](#visualisation)
+- [Configuration](#configuration)
+- [`!important` usage](#important-usage)
+- [Demos](#demos)
+- [Creator](#creator)
+- [Copyright and license](#copyright-and-license)
 
+## How does it work?
 
+- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the viewport on small devices
+- RFS will prevent the font size from rescaling too small so readability can be assured
+- **Super easy** to use, just use the `font-size` mixin (or `responsive-font-size` property for PostCSS) instead of the `font-size` property
+- The font sizes of all text elements will always remain in relation with each other
+
+
 ![RFS](http://i.imgur.com/gJH6m6g.gif)
 
+
 ## Installation
@@ -25,31 +40,43 @@
 
-**npm:**
+- npm: `npm install rfs`
+- yarn: `yarn add rfs`
+- bower (deprecated): `bower install rfs --save`
 
-```sh
-$ npm install rfs --save
-```
+**Copy/paste (not recommended):**
 
-**yarn:**
+The source files can also be downloaded manually and used in a project. This method is not recommended because you
+lose the ability to easily and quickly manage and update RFS as a dependency.
 
-```sh
-$ yarn add rfs
-```
 
-**Bower:**
+## Usage
 
-```sh
-$ bower install rfs --save
+In the following examples, this folder structure is assumed (you will probably just use one pre/postprocessor):
+
+```text
+project/
+├── postccss/
+│   └── main.css
+├── less/
+│   └── main.less
+├── node_modules/
+│   └── rfs
+│        └── ...
+├── sass/
+│   └── main.sass
+├── scss/
+│   └── main.scss
+└── stylus/
+    └── main.styl
 ```
 
-**Copy/paste (not recommended):**
 
-The source files can also be downloaded manually and used in a project. This method is not recommended because you
-lose the ability to easily and quickly manage and update RFS as a dependency.
+### Sass
 
+`.scss` syntax:
 
-## Usage
+```scss
+// scss/main.scss
 
-### SCSS
+@import "../node_modules/rfs/scss";
 
-```scss
 .title {
@@ -60,32 +87,52 @@ @include responsive-font-size(4rem); // OR @include responsive-font-size(64px); OR @include rfs(64);
 
-### Sass
+`.sass` syntax:
 
 ```sass
+// scss/main.scss
+
+@import "../node_modules/rfs/sass"
+
 .title
-  +responsive-font-size(4rem) // OR +responsive-font-size(64px) OR +rfs(64)
+  +font-size(4rem) // OR +responsive-font-size(64px) OR +rfs(64)
 ```
 
+
 ### PostCSS
 
 ```postcss
+// postcss/main.css
+
 .title {
-  responsive-font-size: 4rem; // OR responsive-font-size: 64px; OR rfs: 64;
+  font-size: 4rem; // OR responsive-font-size: 64px; OR rfs: 64;
 }
+
+// Handle postcss afterwards (see examples folder for PostCSS example)
 ```
 
+
 ### Less
 
 ```less
+// less/main.less
+
+@import "../node_modules/rfs/less";
+
 .title {
-  .responsive-font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64);
+  .font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64);
 }
 ```
 
+
 ### Stylus
 
 ```stylus
+// stylus/main.styl
+
+@import "../node_modules/rfs/stylus";
+
 .title
-  responsive-font-size(4rem) // OR responsive-font-size(64px) OR rfs(64)
+  font-size(4rem) // OR responsive-font-size(64px) OR rfs(64)
 ```
 
+
 ### Generated css
@@ -100,3 +147,3 @@
   .title {
-    font-size: calc(1.6rem + 3.2vw);
+    font-size: calc(1.525rem + 3.3vw);
   }
@@ -106,35 +153,53 @@ }
 
+If you're using Webpack, you can simplify the `@import` using the `~` prefix:
+```text
+@import "~rfs/less";
+@import "~rfs/sass";
+@import "~rfs/scss";
+@import "~rfs/stylus";
+```
+
+## Visualisation
+
+If you wonder how the font sizes are rescaled, wonder no more and stare at this graph which might clarify things a bit. The font sizes used on the graph are in `px`, but in reality RFS renders them in `rem` by default:
+
+![RFS visualisation](https://i.imgur.com/P2ixaKH.png)
+
+
 ## Configuration
 
-![RFS visualisation](https://i.imgur.com/yaOonFe.png)
+RFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way font sizes are rescaled, you can:
 
-### Minimum font size <sub><sup>(unit in `px` or `rem`)</sup></sub>
 
-* SCSS, Sass & Stylus: `$rfs-minimum-font-size`
-* Less: `@rfs-minimum-font-size`
-* PostCSS: `minimumFontSize`
+### Base font size <sub><sup>(unit in `px` or `rem`)</sup></sub>
 
-The option will prevent the font size from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this minimum font size, no fluid font rescaling will take place.
+- SCSS, Sass & Stylus: `$rfs-base-font-size`
+- Less: `@rfs-base-font-size`
+- PostCSS: `baseFontSize`
 
-* Default value: `1rem`
+The option will prevent the font size from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this base font size, no fluid font rescaling will take place.
 
+*Default value: `1.25rem`*
+
+
 ### Font size unit <sub><sup>(`px` or `rem`)</sup></sub>
 
-* SCSS, Sass & Stylus: `$rfs-font-size-unit`
-* Less: `@rfs-font-size-unit`
-* PostCSS: `fontSizeUnit`
+- SCSS, Sass & Stylus: `$rfs-font-size-unit`
+- Less: `@rfs-font-size-unit`
+- PostCSS: `fontSizeUnit`
 
-The output font size will be rendered in this unit.
+The output font size will be rendered in this unit. Setting it in `px` will disable the ability for users to change the the font size in their browser.
 
-* Default value: `rem`
+*Default value: `rem`*
 
+
 ### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub>
 
-* SCSS, Sass & Stylus: `$rfs-breakpoint`
-* Less: `@rfs-breakpoint`
-* PostCSS: `breakpoint`
+- SCSS, Sass & Stylus: `$rfs-breakpoint`
+- Less: `@rfs-breakpoint`
+- PostCSS: `breakpoint`
 
 Above this breakpoint, the font size will be equal to the font size you passed to RFS; below the breakpoint, the font size will dynamically scale.
 
-* Default value: `1200px`
+*Default value: `1200px`*
 
@@ -144,9 +209,9 @@
 
-* SCSS, Sass & Stylus: `$rfs-breakpoint-unit`
-* Less: `@rfs-breakpoint-unit`
-* PostCSS: `breakpointUnit`
+- SCSS, Sass & Stylus: `$rfs-breakpoint-unit`
+- Less: `@rfs-breakpoint-unit`
+- PostCSS: `breakpointUnit`
 
 The width of the max width in the media query will be rendered in this unit.
 
-* Default value: `px`
+*Default value: `px`*
 
@@ -156,9 +221,9 @@
 
-* SCSS, Sass & Stylus: `$rfs-factor`
-* Less: `@rfs-factor`
-* PostCSS: `factor`
+- SCSS, Sass & Stylus: `$rfs-factor`
+- Less: `@rfs-factor`
+- PostCSS: `factor`
 
-This value determines the strength of font size resizing. The higher the factor, the less difference there is between font sizes on small screens. The lower the factor, the less influence RFS has, which results in bigger font sizes for small screens. The factor must me greater than 1, setting it to 1 will disable dynamic rescaling.
+This value determines the strength of font size resizing. The higher the factor, the less difference there is between font sizes on small screens. The lower the factor, the less influence RFS has, which results in bigger font sizes for small screens. The factor must me greater than 1.
 
-* Default value: `5`
+*Default value: `10`*
 
@@ -168,7 +233,8 @@
 
-> **SCSS, Sass & Stylus:** `$rfs-two-dimensional`
-> **Less:** `@rfs-two-dimensional`
-> **PostCSS:** `twoDimensional`
+- SCSS, Sass & Stylus: `$rfs-two-dimensional`
+- Less: `@rfs-two-dimensional`
+- PostCSS: `twoDimensional`
 
 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`*
@@ -179,8 +245,10 @@
 
-* SCSS, Sass & Stylus: `$rfs-class`
-* Less: `@rfs-class`
-* PostCSS: `class`
+- SCSS, Sass & Stylus: `$rfs-class`
+- Less: `@rfs-class`
+- PostCSS: `class`
 
 RFS can be enabled or disabled with a class. There are 3 options:
 
+- `false`
+  No extra classes are generated.
 - `disable`
@@ -190,6 +258,4 @@ When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to disable responsive font sizes for the element and its child elements.
   RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements.
-- `false`
-  No extra classes are generated.
 
-* Default value: `false`
+*Default value: `false`*
 
@@ -199,12 +265,12 @@
 
-* SCSS, Sass & Stylus: `$rfs-safari-iframe-resize-bug-fix`
-* Less: `@rfs-safari-iframe-resize-bug-fix`
-* PostCSS: `safariIframeResizeBugFix`
+- SCSS, Sass & Stylus: `$rfs-safari-iframe-resize-bug-fix`
+- Less: `@rfs-safari-iframe-resize-bug-fix`
+- PostCSS: `safariIframeResizeBugFix`
 
 Safari doesn't resize its font size in an iframe if the iframe is resized. To fix this `min-width: 0vw` can be added and that's what happens if this option is enabled. See [#14](https://github.com/twbs/rfs/issues/14).
 
-* Default value: `false`
+*Default value: `false`*
 
 
-## !important
+## !important usage
 
@@ -228,3 +294,3 @@ By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`)
   .label {
-    font-size: calc(1.3rem + 1.6vw) !important;
+    font-size: calc(1.375rem + 1.5vw) !important;
   }
@@ -234,8 +300,9 @@ }
 
+
 ## Best practices
 
-- Remember to set RFS on your font size of your `html` or `body` (especially if the minimum font size is lowered), otherwise some text may not dynamically rescale. Note that setting RFS on `html` can influence the value of `rem`.
-- Always set your line-heights relative (in `em` or unitless).
-- More tips and tricks with examples can be found [here](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6) (written when only the SCSS version was made).
+- Don't set RFS on the `html` element, because this influences the value of `rem` and could lead to unexpected results.
+- Always set your line-heights relative (in `em` or unitless) to prevent interline issues.
 
+
 ## Demos
@@ -246,2 +313,3 @@
 
+
 ## Creator
@@ -251,5 +319,6 @@
 
-* <https://twitter.com/Martijn_Cuppens>
-* <https://github.com/MartijnCuppens>
+- <https://twitter.com/Martijn_Cuppens>
+- <https://github.com/MartijnCuppens>
 
+
 ## Copyright and license
@@ -262,1 +331,5 @@
 [npm-url]: https://npmjs.org/package/rfs
+[licence-image]: https://img.shields.io/npm/l/rfs.svg
+[license-url]: https://github.com/twbs/rfs/blob/master/LICENSE
+[build-image]: https://img.shields.io/travis/twbs/rfs.svg
+[build-url]: https://travis-ci.org/twbs/rfs

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Lines of code

174

increased by1.75%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

321

increased by29.44%

Worsened metrics

Total package byte prevSize

38232

decreased by-10.53%

Dev dependency count

20

increased by17.65%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes