diff options
author | Martijn Cuppens <martijn.cuppens@intracto.com> | 2018-12-20 00:21:21 +0300 |
---|---|---|
committer | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-02-11 21:27:14 +0300 |
commit | 5ed2c4bf5961bebf1f63422830394d4eb732be01 (patch) | |
tree | 41d968a99ad42ad6f86b3105e90a05ffd7065f7e | |
parent | f162a6c54d036eb9b0df22ff2c59ed531b813215 (diff) |
Increase base font size to 1.25rem and factor to 10
-rw-r--r-- | README.md | 6 | ||||
-rw-r--r-- | examples/less/gulp/dest/main.css | 12 | ||||
-rw-r--r-- | examples/less/node/dest/main.css | 12 | ||||
-rw-r--r-- | examples/postcss/gulp/dest/main.css | 12 | ||||
-rw-r--r-- | examples/postcss/gulp/gulpfile.js | 4 | ||||
-rw-r--r-- | examples/postcss/node/dest/main.css | 12 | ||||
-rw-r--r-- | examples/postcss/node/index.js | 4 | ||||
-rw-r--r-- | examples/sass/gulp/dest/main.css | 14 | ||||
-rw-r--r-- | examples/sass/node/dest/main.css | 12 | ||||
-rw-r--r-- | examples/stylus/gulp/dest/main.css | 12 | ||||
-rw-r--r-- | examples/stylus/node/dest/main.css | 12 | ||||
-rw-r--r-- | less/rfs.less | 4 | ||||
-rw-r--r-- | postcss/rfs.js | 4 | ||||
-rw-r--r-- | sass/_rfs.scss | 4 | ||||
-rw-r--r-- | stylus/rfs.styl | 4 |
15 files changed, 64 insertions, 64 deletions
@@ -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 |