Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/rfs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMartijn Cuppens <martijn.cuppens@intracto.com>2018-12-20 00:21:21 +0300
committerMartijn Cuppens <martijn.cuppens@gmail.com>2019-02-11 21:27:14 +0300
commit5ed2c4bf5961bebf1f63422830394d4eb732be01 (patch)
tree41d968a99ad42ad6f86b3105e90a05ffd7065f7e
parentf162a6c54d036eb9b0df22ff2c59ed531b813215 (diff)
Increase base font size to 1.25rem and factor to 10
-rw-r--r--README.md6
-rw-r--r--examples/less/gulp/dest/main.css12
-rw-r--r--examples/less/node/dest/main.css12
-rw-r--r--examples/postcss/gulp/dest/main.css12
-rw-r--r--examples/postcss/gulp/gulpfile.js4
-rw-r--r--examples/postcss/node/dest/main.css12
-rw-r--r--examples/postcss/node/index.js4
-rw-r--r--examples/sass/gulp/dest/main.css14
-rw-r--r--examples/sass/node/dest/main.css12
-rw-r--r--examples/stylus/gulp/dest/main.css12
-rw-r--r--examples/stylus/node/dest/main.css12
-rw-r--r--less/rfs.less4
-rw-r--r--postcss/rfs.js4
-rw-r--r--sass/_rfs.scss4
-rw-r--r--stylus/rfs.styl4
15 files changed, 64 insertions, 64 deletions
diff --git a/README.md b/README.md
index 9a28049..4b0bb3c 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
@media (max-width: 1200px) {
.title {
- font-size: calc(1.6rem + 3.2vw);
+ font-size: calc(1.525rem + 3.3vw);
}
}
```
@@ -96,7 +96,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency.
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: `1rem`
+* Default value: `1.25rem`
### Font size unit <sub><sup>(`px` or `rem`)</sup></sub>
@@ -138,7 +138,7 @@ The width of the max width in the media query will be rendered in this unit.
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`
+* Default value: `10`
### Two dimensional <sub><sup>(boolean)</sup></sub>
diff --git a/examples/less/gulp/dest/main.css b/examples/less/gulp/dest/main.css
index 62d9bfe..e37a2d9 100644
--- a/examples/less/gulp/dest/main.css
+++ b/examples/less/gulp/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* responsive-font-size property with `rem` unit */
@@ -15,7 +15,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* responsive-font-size property with !important */
@@ -24,7 +24,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.06666667vw) !important;
+ font-size: calc(1.325rem + 0.9vw) !important;
}
}
/* rfs shorthand */
@@ -33,7 +33,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* not supported unit */
@@ -48,7 +48,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw) ;
+ font-size: calc(1.3rem + 0.6vw) ;
}
}
}
@@ -58,6 +58,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
diff --git a/examples/less/node/dest/main.css b/examples/less/node/dest/main.css
index 62d9bfe..e37a2d9 100644
--- a/examples/less/node/dest/main.css
+++ b/examples/less/node/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* responsive-font-size property with `rem` unit */
@@ -15,7 +15,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* responsive-font-size property with !important */
@@ -24,7 +24,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.06666667vw) !important;
+ font-size: calc(1.325rem + 0.9vw) !important;
}
}
/* rfs shorthand */
@@ -33,7 +33,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
/* not supported unit */
@@ -48,7 +48,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw) ;
+ font-size: calc(1.3rem + 0.6vw) ;
}
}
}
@@ -58,6 +58,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.06666667vw) ;
+ font-size: calc(1.325rem + 0.9vw) ;
}
}
diff --git a/examples/postcss/gulp/dest/main.css b/examples/postcss/gulp/dest/main.css
index 2a8d061..143d0ad 100644
--- a/examples/postcss/gulp/dest/main.css
+++ b/examples/postcss/gulp/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -16,7 +16,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -26,7 +26,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.066667vw) !important;
+ font-size: calc(1.325rem + 0.9vw) !important;
}
}
@@ -36,7 +36,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -57,7 +57,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw);
+ font-size: calc(1.3rem + 0.6vw);
}
}
}
@@ -68,6 +68,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
diff --git a/examples/postcss/gulp/gulpfile.js b/examples/postcss/gulp/gulpfile.js
index 725ba60..f4111d7 100644
--- a/examples/postcss/gulp/gulpfile.js
+++ b/examples/postcss/gulp/gulpfile.js
@@ -3,11 +3,11 @@ const postcss = require('gulp-postcss');
const rfs = require('../../..');
const options = {
twoDimensional: false,
- baseFontSize: 16,
+ baseFontSize: 20,
fontSizeUnit: 'rem',
breakpoint: 1200,
breakpointUnit: 'px',
- factor: 5,
+ factor: 10,
class: false,
unitPrecision: 6,
safariIframeResizeBugFix: false,
diff --git a/examples/postcss/node/dest/main.css b/examples/postcss/node/dest/main.css
index 2a8d061..143d0ad 100644
--- a/examples/postcss/node/dest/main.css
+++ b/examples/postcss/node/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -16,7 +16,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -26,7 +26,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.066667vw) !important;
+ font-size: calc(1.325rem + 0.9vw) !important;
}
}
@@ -36,7 +36,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
@@ -57,7 +57,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw);
+ font-size: calc(1.3rem + 0.6vw);
}
}
}
@@ -68,6 +68,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.066667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
diff --git a/examples/postcss/node/index.js b/examples/postcss/node/index.js
index 4b77acb..f63b047 100644
--- a/examples/postcss/node/index.js
+++ b/examples/postcss/node/index.js
@@ -4,11 +4,11 @@ const rfs = require('../../..');
const css = fs.readFileSync(__dirname + '/src/main.css', 'utf8');
const options = {
twoDimensional: false,
- baseFontSize: 16,
+ baseFontSize: 20,
fontSizeUnit: 'rem',
breakpoint: '75rem',
breakpointUnit: 'px',
- factor: 5,
+ factor: 10,
unitPrecision: 6,
remValue: 16,
propList: ['responsive-font-size', 'rfs']
diff --git a/examples/sass/gulp/dest/main.css b/examples/sass/gulp/dest/main.css
index c798a59..8e562e7 100644
--- a/examples/sass/gulp/dest/main.css
+++ b/examples/sass/gulp/dest/main.css
@@ -2,31 +2,31 @@
.selector-1 {
background-color: red;
width: 300px;
- font-size: 2rem; }
+ font-size: 6.0625rem; }
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.73125rem + 5.775vw) ; } }
/* responsive-font-size property with `rem` unit */
.selector-2 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
/* responsive-font-size property with !important */
.selector-3 {
font-size: 2rem !important; }
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.06667vw) !important; } }
+ font-size: calc(1.325rem + 0.9vw) !important; } }
/* rfs shorthand */
.selector-4 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
/* not supported unit */
.selector-5 {
@@ -42,11 +42,11 @@
font-size: 1.75rem; }
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw) ; } } }
+ font-size: calc(1.3rem + 0.6vw) ; } } }
/* responsive-font-size property without unit */
.selector-8 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/examples/sass/node/dest/main.css b/examples/sass/node/dest/main.css
index c798a59..c22dd48 100644
--- a/examples/sass/node/dest/main.css
+++ b/examples/sass/node/dest/main.css
@@ -5,28 +5,28 @@
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
/* responsive-font-size property with `rem` unit */
.selector-2 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
/* responsive-font-size property with !important */
.selector-3 {
font-size: 2rem !important; }
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.06667vw) !important; } }
+ font-size: calc(1.325rem + 0.9vw) !important; } }
/* rfs shorthand */
.selector-4 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
/* not supported unit */
.selector-5 {
@@ -42,11 +42,11 @@
font-size: 1.75rem; }
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw) ; } } }
+ font-size: calc(1.3rem + 0.6vw) ; } } }
/* responsive-font-size property without unit */
.selector-8 {
font-size: 2rem; }
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.06667vw) ; } }
+ font-size: calc(1.325rem + 0.9vw) ; } }
diff --git a/examples/stylus/gulp/dest/main.css b/examples/stylus/gulp/dest/main.css
index 74979f5..ac3c9cf 100644
--- a/examples/stylus/gulp/dest/main.css
+++ b/examples/stylus/gulp/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* responsive-font-size property with `rem` unit */
@@ -15,7 +15,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* responsive-font-size property with !important */
@@ -24,7 +24,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.066666666666667vw)!important;
+ font-size: calc(1.325rem + 0.9vw)!important;
}
}
/* rfs shorthand */
@@ -33,7 +33,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* not supported unit */
@@ -51,7 +51,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw);
+ font-size: calc(1.3rem + 0.6vw);
}
}
}
@@ -61,6 +61,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
diff --git a/examples/stylus/node/dest/main.css b/examples/stylus/node/dest/main.css
index 74979f5..ac3c9cf 100644
--- a/examples/stylus/node/dest/main.css
+++ b/examples/stylus/node/dest/main.css
@@ -6,7 +6,7 @@
}
@media (max-width: 1200px) {
.selector-1 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* responsive-font-size property with `rem` unit */
@@ -15,7 +15,7 @@
}
@media (max-width: 1200px) {
.selector-2 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* responsive-font-size property with !important */
@@ -24,7 +24,7 @@
}
@media (max-width: 1200px) {
.selector-3 {
- font-size: calc(1.2rem + 1.066666666666667vw)!important;
+ font-size: calc(1.325rem + 0.9vw)!important;
}
}
/* rfs shorthand */
@@ -33,7 +33,7 @@
}
@media (max-width: 1200px) {
.selector-4 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
/* not supported unit */
@@ -51,7 +51,7 @@
}
@media (max-width: 1200px) {
.selector-7 {
- font-size: calc(1.15rem + 0.8vw);
+ font-size: calc(1.3rem + 0.6vw);
}
}
}
@@ -61,6 +61,6 @@
}
@media (max-width: 1200px) {
.selector-8 {
- font-size: calc(1.2rem + 1.066666666666667vw);
+ font-size: calc(1.325rem + 0.9vw);
}
}
diff --git a/less/rfs.less b/less/rfs.less
index e99538a..cb720f5 100644
--- a/less/rfs.less
+++ b/less/rfs.less
@@ -9,7 +9,7 @@
// Configuration
// Base font size
-@rfs-base-font-size: 1rem;
+@rfs-base-font-size: 1.25rem;
@rfs-font-size-unit: rem;
// Breakpoint at where font-size starts decreasing if screen width is smaller
@@ -20,7 +20,7 @@
@rfs-two-dimensional: false;
// Factor of decrease
-@rfs-factor: 5;
+@rfs-factor: 10;
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
@rfs-class: false;
diff --git a/postcss/rfs.js b/postcss/rfs.js
index 3612d3d..c4ac0f1 100644
--- a/postcss/rfs.js
+++ b/postcss/rfs.js
@@ -15,11 +15,11 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
const DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR = '.disable-responsive-font-size';
const ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR = '.enable-responsive-font-size';
opts = opts || {};
- opts.baseFontSize = opts.baseFontSize || 16;
+ opts.baseFontSize = opts.baseFontSize || 20;
opts.fontSizeUnit = opts.fontSizeUnit || 'rem';
opts.breakpoint = opts.breakpoint || 1200;
opts.breakpointUnit = opts.breakpointUnit || 'px';
- opts.factor = opts.factor || 5;
+ opts.factor = opts.factor || 10;
opts.twoDimensional = opts.twoDimensional || false;
opts.unitPrecision = opts.unitPrecision || 5;
opts.class = opts.class || false;
diff --git a/sass/_rfs.scss b/sass/_rfs.scss
index 25092dd..95477b8 100644
--- a/sass/_rfs.scss
+++ b/sass/_rfs.scss
@@ -9,7 +9,7 @@
// Configuration
// Base font size
-$rfs-base-font-size: 1rem !default;
+$rfs-base-font-size: 1.25rem !default;
$rfs-font-size-unit: rem !default;
// Breakpoint at where font-size starts decreasing if screen width is smaller
@@ -20,7 +20,7 @@ $rfs-breakpoint-unit: px !default;
$rfs-two-dimensional: false !default;
// Factor of decrease
-$rfs-factor: 5 !default;
+$rfs-factor: 10 !default;
@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
diff --git a/stylus/rfs.styl b/stylus/rfs.styl
index 156e157..1d8b622 100644
--- a/stylus/rfs.styl
+++ b/stylus/rfs.styl
@@ -9,7 +9,7 @@
// Configuration
// Base font size
-$rfs-base-font-size ?= 1rem
+$rfs-base-font-size ?= 1.25rem
$rfs-font-size-unit ?= rem
// Breakpoint at where font-size starts decreasing if screen width is smaller
@@ -20,7 +20,7 @@ $rfs-breakpoint-unit ?= px
$rfs-two-dimensional ?= false
// Factor of decrease
-$rfs-factor ?= 5
+$rfs-factor ?= 10
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
$rfs-classes ?= false