rfs - npm Package Compare versions

Comparing version 7.1.8 to 7.1.9

package.json

 {
   "name": "rfs",
-  "version": "7.1.8",
+  "version": "7.1.9",
   "main": "postcss/rfs.js",
   "description": "Powerfull & easy-to-use responsive font sizing system.",
+  "files": [
+    "less/rfs.less",
+    "postcss/rfs.js",
+    "sass/_rfs.sass",
+    "scss/_rfs.scss",
+    "stylus/rfs.styl"
+  ],
   "scripts": {
@@ -14,3 +21,3 @@ "test": "echo \"Error: no test specified\" && exit 1",
     "type": "git",
-    "url": "git+https://github.com/project-rfs/rfs.git"
+    "url": "git+https://github.com/twbs/rfs.git"
   },
@@ -31,5 +38,5 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/project-rfs/rfs/issues"
+    "url": "https://github.com/twbs/rfs/issues"
   },
-  "homepage": "https://github.com/project-rfs/rfs#readme",
+  "homepage": "https://github.com/twbs/rfs#readme",
   "devDependencies": {
@@ -42,11 +49,11 @@ "babel-cli": "^6.26.0",
     "gulp-postcss": "^8.0.0",
-    "gulp-sass": "^4.0.1",
+    "gulp-sass": "^4.0.2",
     "gulp-stylus": "^2.7.0",
     "less": "^3.8.1",
-    "node-sass": "^4.9.4",
-    "postcss": "^7.0.5",
+    "node-sass": "^4.10.0",
+    "postcss": "^7.0.6",
     "postcss-nested": "^4.1.0",
     "postcss-prettify": "^0.3.4",
-    "stylelint": "^9.6.0",
-    "stylelint-scss": "^3.3.1",
+    "stylelint": "^9.8.0",
+    "stylelint-scss": "^3.4.0",
     "stylus": "^0.54.5",
@@ -53,0 +60,0 @@ "uglify-js": "^3.4.9"

postcss/rfs.js

@@ -5,3 +5,3 @@ // PostCSS RFS plugin
 //
-// See https://github.com/project-rfs/rfs
+// See https://github.com/twbs/rfs
 
@@ -136,3 +136,3 @@ 'use strict';
 
-        // Safari iframe resize bug: https://github.com/project-rfs/rfs/issues/14
+        // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
         if (opts.safariIframeResizeBugFix) {
@@ -139,0 +139,0 @@ mediaQueryRule.append(postcss.decl({ prop: 'min-width', value: '0vw' }));

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 (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: 
-> - [SCSS](http://sass-lang.com/)
-> - [Sass](http://sass-lang.com/)
-> - [PostCSS](http://postcss.org/)
-> - [Less](http://lesscss.org/)
-> - [Stylus](http://stylus-lang.com/)
+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:
 
+- [SCSS](https://sass-lang.com/)
+- [Sass](https://sass-lang.com/)
+- [PostCSS](https://postcss.org/)
+- [Less](http://lesscss.org/)
+- [Stylus](http://stylus-lang.com/)
+
 ## Advantages
+
 - 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.
+- 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.
@@ -23,2 +22,3 @@ - Font sizes of all text elements will always remain in relation with each other.
 ## Installation
+
 RFS can be installed using a package manager (recommended):
@@ -28,3 +28,3 @@
 
-```
+```sh
 $ npm install rfs --save
@@ -35,3 +35,3 @@ ```
 
-```
+```sh
 $ yarn add rfs
@@ -42,3 +42,3 @@ ```
 
-```
+```sh
 $ bower install rfs --save
@@ -54,3 +54,5 @@ ```
 ## Usage
+
 ### SCSS
+
 ```scss
@@ -63,2 +65,3 @@ .title {
 ### Sass
+
 ```sass
@@ -70,2 +73,3 @@ .title
 ### PostCSS
+
 ```postcss
@@ -78,9 +82,11 @@ .title {
 ### Less
+
 ```less
 .title {
   .responsive-font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64);
-}  
+}
 ```
 
 ### Stylus
+
 ```stylus
@@ -90,3 +96,5 @@ .title
 ```
+
 ### Generated css
+
 ```css
@@ -103,2 +111,3 @@ .title {
 ```
+
 ## Configuration
@@ -108,83 +117,96 @@
 
-### 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`  
+### Minimum 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.  
-*Default value: `1rem`*
+* SCSS, Sass & Stylus: `$rfs-minimum-font-size`
+* Less: `@rfs-minimum-font-size`
+* PostCSS: `minimumFontSize`
 
+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.
 
-### Font size unit <sub><sup>(`px` or `rem`)</sup></sub> ###
-> **SCSS, Sass & Stylus:** `$rfs-font-size-unit`  
-> **Less:** `@rfs-font-size-unit`  
-> **PostCSS:** `fontSizeUnit`  
+* Default value: `1rem`
 
-The output font size will be rendered in this unit.  
-*Default value: `rem`*
+### Font size unit <sub><sup>(`px` or `rem`)</sup></sub>
 
+* SCSS, Sass & Stylus: `$rfs-font-size-unit`
+* Less: `@rfs-font-size-unit`
+* PostCSS: `fontSizeUnit`
 
-### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub> ###
-> **SCSS, Sass & Stylus:** `$rfs-breakpoint`  
-> **Less:** `@rfs-breakpoint`  
-> **PostCSS:** `breakpoint`  
+The output font size will be rendered in this unit.
 
-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: `rem`
 
+### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub>
 
-### Breakpoint unit <sub><sup>(`px`, `em` or `rem`)</sup></sub> ###
-> **SCSS, Sass & Stylus:** `$rfs-breakpoint-unit`  
-> **Less:** `@rfs-breakpoint-unit`  
-> **PostCSS:** `breakpointUnit`  
+* SCSS, Sass & Stylus: `$rfs-breakpoint`
+* Less: `@rfs-breakpoint`
+* PostCSS: `breakpoint`
 
-The width of the max width in the media query will be rendered in this unit.  
-*Default value: `px`*
+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`
 
-### Factor <sub><sup>(number)</sup></sub> ###
-> **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.  
-*Default value: `5`*
+### Breakpoint unit <sub><sup>(`px`, `em` or `rem`)</sup></sub>
 
+* SCSS, Sass & Stylus: `$rfs-breakpoint-unit`
+* Less: `@rfs-breakpoint-unit`
+* PostCSS: `breakpointUnit`
 
-### Two dimensional <sub><sup>(boolean)</sup></sub> ###
-> **SCSS, Sass & Stylus:** `$rfs-two-dimensional`  
-> **Less:** `@rfs-two-dimensional`  
-> **PostCSS:** `twoDimensional`  
+The width of the max width in the media query will be rendered in this unit.
 
-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`*
+* Default value: `px`
 
 
-### Class <sub><sup>(boolean)</sup></sub> ###
-> **SCSS, Sass & Stylus:** `$rfs-class`  
-> **Less:** `@rfs-class`  
-> **PostCSS:** `class`  
+### Factor <sub><sup>(number)</sup></sub>
 
-RFS can ben enabled or disabled with a class. There are 3 options:  
-- `disable`  
-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.  
-- `enable`  
-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.  
+* SCSS, Sass & Stylus: `$rfs-factor`
+* Less: `@rfs-factor`
+* PostCSS: `factor`
 
-*Default value: `false`*
+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.
 
+* Default value: `5`
 
-### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub> ###
-> **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/project-rfs/rfs/issues/14).  
+### Two dimensional <sub><sup>(boolean)</sup></sub>
 
+> **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`*
 
 
+### Class <sub><sup>(boolean)</sup></sub>
+
+* SCSS, Sass & Stylus: `$rfs-class`
+* Less: `@rfs-class`
+* PostCSS: `class`
+
+RFS can be enabled or disabled with a class. There are 3 options:
+
+- `disable`
+  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.
+- `enable`
+  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`
+
+
+### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub>
+
+* 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`
+
+
 ## !important
+
 By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`)
@@ -199,2 +221,3 @@
 CSS:
+
 ```css
@@ -213,13 +236,16 @@ .label {
 ## 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).
+- 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).
 
-##  Demos
-- [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy)
-- [RFS in bootstrap demo](http://martijncuppens.github.io/rfs)
+## Demos
 
+- [Simple Codepen Demo](https://codepen.io/MartijnCuppens/pen/ZBjdMy)
+- [RFS in bootstrap demo](https://martijncuppens.github.io/rfs)
+
 ## Creator
+
 **Martijn Cuppens**
+
 * <https://twitter.com/Martijn_Cuppens>
@@ -229,2 +255,7 @@ * <https://github.com/MartijnCuppens>
 ## Copyright and license
-Code released under [the MIT license](https://github.com/project-rfs/rfs/blob/master/LICENSE).
+
+Code released under [the MIT license](https://github.com/twbs/rfs/blob/master/LICENSE).
+
+
+[npm-image]: https://img.shields.io/npm/v/rfs.svg
+[npm-url]: https://npmjs.org/package/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

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

Improved metrics

Total package byte prevSize

42732

increased by1.28%

Number of lines in readme file

248

increased by14.29%

No dependency changes