diff options
-rw-r--r-- | examples/sass/gulp/gulpfile.js | 4 | ||||
-rw-r--r-- | examples/sass/gulp/src/main.sass | 36 | ||||
-rw-r--r-- | examples/sass/gulp/src/main.scss (renamed from examples/scss/node/src/main.scss) | 2 | ||||
-rw-r--r-- | examples/sass/node/index.js | 2 | ||||
-rw-r--r-- | examples/sass/node/src/main.sass | 36 | ||||
-rw-r--r-- | examples/sass/node/src/main.scss (renamed from examples/scss/gulp/src/main.scss) | 2 | ||||
-rw-r--r-- | examples/scss/gulp/dest/main.css | 52 | ||||
-rw-r--r-- | examples/scss/gulp/gulpfile.js | 14 | ||||
-rw-r--r-- | examples/scss/node/dest/main.css | 52 | ||||
-rw-r--r-- | examples/scss/node/index.js | 22 | ||||
-rw-r--r-- | package.json | 9 | ||||
-rw-r--r-- | sass/_rfs.sass | 175 | ||||
-rw-r--r-- | sass/_rfs.scss (renamed from scss/_rfs.scss) | 0 |
13 files changed, 9 insertions, 397 deletions
diff --git a/examples/sass/gulp/gulpfile.js b/examples/sass/gulp/gulpfile.js index 3073675..62c60de 100644 --- a/examples/sass/gulp/gulpfile.js +++ b/examples/sass/gulp/gulpfile.js @@ -4,11 +4,11 @@ const gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('build', function () { - return gulp.src('./src/**/*.sass') + return gulp.src('./src/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./dest')); }); gulp.task('watch', function () { - gulp.watch('./src/**/*.sass', ['build']); + gulp.watch('./src/**/*.scss', ['build']); }); diff --git a/examples/sass/gulp/src/main.sass b/examples/sass/gulp/src/main.sass deleted file mode 100644 index 9c215b4..0000000 --- a/examples/sass/gulp/src/main.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../../../scss/rfs" - -/* responsive-font-size property with `px` unit */ -.selector-1 - background-color: red - width: 300px - @include responsive-font-size(32px) - -/* responsive-font-size property with `rem` unit */ -.selector-2 - @include responsive-font-size(2rem) - -/* responsive-font-size property with !important */ -.selector-3 - @include responsive-font-size(2rem, true) - -/* rfs shorthand */ -.selector-4 - @include rfs(2rem) - -/* not supported unit */ -.selector-5 - @include responsive-font-size(2em) - -/* special value */ -.selector-6 - @include responsive-font-size(inherit) - -/* responsive-font-size property inside @support-query */ -@supports (display: flex) - .selector-7 - @include rfs(28px) - -/* responsive-font-size property without unit */ -.selector-8 - @include responsive-font-size(32) diff --git a/examples/scss/node/src/main.scss b/examples/sass/gulp/src/main.scss index c0e9367..6266b95 100644 --- a/examples/scss/node/src/main.scss +++ b/examples/sass/gulp/src/main.scss @@ -1,4 +1,4 @@ -@import "../../../../scss/rfs"; +@import "../../../../sass/rfs"; /* responsive-font-size property with `px` unit */ .selector-1 { diff --git a/examples/sass/node/index.js b/examples/sass/node/index.js index b7374de..dde62f0 100644 --- a/examples/sass/node/index.js +++ b/examples/sass/node/index.js @@ -2,7 +2,7 @@ const fs = require('fs'); const sass = require('node-sass'); sass.render({ - file: __dirname + '/src/main.sass', outFile: __dirname + '/dest/main.css', + file: __dirname + '/src/main.scss', outFile: __dirname + '/dest/main.css', }, function (error, result) { // node-style callback from v3.0.0 onwards if (!error) { // No errors during the compilation, write this result on the disk diff --git a/examples/sass/node/src/main.sass b/examples/sass/node/src/main.sass deleted file mode 100644 index 9c215b4..0000000 --- a/examples/sass/node/src/main.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../../../scss/rfs" - -/* responsive-font-size property with `px` unit */ -.selector-1 - background-color: red - width: 300px - @include responsive-font-size(32px) - -/* responsive-font-size property with `rem` unit */ -.selector-2 - @include responsive-font-size(2rem) - -/* responsive-font-size property with !important */ -.selector-3 - @include responsive-font-size(2rem, true) - -/* rfs shorthand */ -.selector-4 - @include rfs(2rem) - -/* not supported unit */ -.selector-5 - @include responsive-font-size(2em) - -/* special value */ -.selector-6 - @include responsive-font-size(inherit) - -/* responsive-font-size property inside @support-query */ -@supports (display: flex) - .selector-7 - @include rfs(28px) - -/* responsive-font-size property without unit */ -.selector-8 - @include responsive-font-size(32) diff --git a/examples/scss/gulp/src/main.scss b/examples/sass/node/src/main.scss index c0e9367..6266b95 100644 --- a/examples/scss/gulp/src/main.scss +++ b/examples/sass/node/src/main.scss @@ -1,4 +1,4 @@ -@import "../../../../scss/rfs"; +@import "../../../../sass/rfs"; /* responsive-font-size property with `px` unit */ .selector-1 { diff --git a/examples/scss/gulp/dest/main.css b/examples/scss/gulp/dest/main.css deleted file mode 100644 index c798a59..0000000 --- a/examples/scss/gulp/dest/main.css +++ /dev/null @@ -1,52 +0,0 @@ -/* responsive-font-size property with `px` unit */ -.selector-1 { - background-color: red; - width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.2rem + 1.06667vw) ; } } - -/* 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) ; } } - -/* 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; } } - -/* rfs shorthand */ -.selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.2rem + 1.06667vw) ; } } - -/* not supported unit */ -.selector-5 { - font-size: 2em; } - -/* special value */ -.selector-6 { - font-size: inherit; } - -/* responsive-font-size property inside @support-query */ -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.15rem + 0.8vw) ; } } } - -/* responsive-font-size property without unit */ -.selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.2rem + 1.06667vw) ; } } diff --git a/examples/scss/gulp/gulpfile.js b/examples/scss/gulp/gulpfile.js deleted file mode 100644 index 62c60de..0000000 --- a/examples/scss/gulp/gulpfile.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -const gulp = require('gulp'), - sass = require('gulp-sass'); - -gulp.task('build', function () { - return gulp.src('./src/**/*.scss') - .pipe(sass().on('error', sass.logError)) - .pipe(gulp.dest('./dest')); -}); - -gulp.task('watch', function () { - gulp.watch('./src/**/*.scss', ['build']); -}); diff --git a/examples/scss/node/dest/main.css b/examples/scss/node/dest/main.css deleted file mode 100644 index c798a59..0000000 --- a/examples/scss/node/dest/main.css +++ /dev/null @@ -1,52 +0,0 @@ -/* responsive-font-size property with `px` unit */ -.selector-1 { - background-color: red; - width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.2rem + 1.06667vw) ; } } - -/* 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) ; } } - -/* 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; } } - -/* rfs shorthand */ -.selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.2rem + 1.06667vw) ; } } - -/* not supported unit */ -.selector-5 { - font-size: 2em; } - -/* special value */ -.selector-6 { - font-size: inherit; } - -/* responsive-font-size property inside @support-query */ -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.15rem + 0.8vw) ; } } } - -/* responsive-font-size property without unit */ -.selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.2rem + 1.06667vw) ; } } diff --git a/examples/scss/node/index.js b/examples/scss/node/index.js deleted file mode 100644 index dde62f0..0000000 --- a/examples/scss/node/index.js +++ /dev/null @@ -1,22 +0,0 @@ -const fs = require('fs'); -const sass = require('node-sass'); - -sass.render({ - file: __dirname + '/src/main.scss', outFile: __dirname + '/dest/main.css', - }, function (error, result) { // node-style callback from v3.0.0 onwards - if (!error) { - // No errors during the compilation, write this result on the disk - fs.writeFile(__dirname + '/dest/main.css', result.css, function (err) { - if (!err) { - console.log('Responsive font sizes generated.'); - } - else { - throw err; - } - }); - } - else { - throw error; - } - } -); diff --git a/package.json b/package.json index 0236bd4..c2eea87 100644 --- a/package.json +++ b/package.json @@ -2,19 +2,18 @@ "name": "rfs", "version": "7.1.9", "main": "postcss/rfs.js", - "description": "Powerfull & easy-to-use responsive font sizing system.", + "description": "Powerfull & easy-to-use responsive font sizing engine.", "files": [ "less/rfs.less", "postcss/rfs.js", - "sass/_rfs.sass", - "scss/_rfs.scss", + "sass/_rfs.scss", "stylus/rfs.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" + "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" }, "repository": { "type": "git", diff --git a/sass/_rfs.sass b/sass/_rfs.sass deleted file mode 100644 index 1c8e646..0000000 --- a/sass/_rfs.sass +++ /dev/null @@ -1,175 +0,0 @@ -// stylelint-disable declaration-property-value-blacklist - -// SCSS RFS mixin -// -// Automated font-resizing -// -// See https://github.com/twbs/rfs - -// Configuration - -// Base font size -$rfs-base-font-size: 1rem !default -$rfs-font-size-unit: rem !default - -// Breakpoint at where font-size starts decreasing if screen width is smaller -$rfs-breakpoint: 1200px !default -$rfs-breakpoint-unit: px !default - -// Resize font-size based on screen height and width -$rfs-two-dimensional: false !default - -// Factor of decrease -$rfs-factor: 5 !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." - -// Generate enable or disable classes. Possibilities: false, "enable" or "disable" -$rfs-class: false !default - -// 1 rem = $rfs-rem-value px -$rfs-rem-value: 16 !default - -// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 -$rfs-safari-iframe-resize-bug-fix: false !default - -// Disable RFS by setting $enable-responsive-font-sizes to false -$enable-responsive-font-sizes: true !default - -// Cache $rfs-base-font-size unit -$rfs-base-font-size-unit: unit($rfs-base-font-size) - -// Remove px-unit from $rfs-base-font-size for calculations -@if $rfs-base-font-size-unit == "px" - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1) -@else if $rfs-base-font-size-unit == "rem" - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value) - -// Cache $rfs-breakpoint unit -$rfs-breakpoint-unit: unit($rfs-breakpoint) - -// Remove unit from $rfs-breakpoint for calculations -@if $rfs-breakpoint-unit == "px" - $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1) -@else if $rfs-breakpoint-unit == "" - // Use `px` as default - $rfs-breakpoint-unit: "px" -@else if $rfs-breakpoint-unit == "rem" or $rfs-breakpoint-unit == "em" - $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value) - -// Responsive font-size mixin -=rfs($fs, $important: false) - // Cache $fs unit - $fs-unit: if(type-of($fs) == "number", unit($fs), false) - - // Add !important suffix if needed - $rfs-suffix: if($important, " !important", "") - - // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 - font-size: #{$fs}#{$rfs-suffix} - @else - // Variables for storing static and fluid rescaling - $rfs-static: null - $rfs-fluid: null - - // Remove px-unit from $fs for calculations - @if $fs-unit == "px" - $fs: $fs / ($fs * 0 + 1) - @else if $fs-unit == "rem" - $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value) - - // Set default font-size - @if $rfs-font-size-unit == rem - $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix} - @else if $rfs-font-size-unit == px - $rfs-static: #{$fs}px#{$rfs-suffix} - @else - @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`." - - // Only add media query if font-size is bigger as the base font-size - // If $rfs-factor == 1, no rescaling will take place - @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes - $min-width: null - $variable-unit: null - - // Calculate minimum font-size for given font-size - $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor - - // Calculate difference between given font-size and minimum font-size for given font-size - $fs-diff: $fs - $fs-min - - // Base font-size formatting - // No need to check if the unit is valid, because we did that before - $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px) - - // If two-dimensional, use smallest of screen width and height - $variable-unit: if($rfs-two-dimensional, vmin, vw) - - // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit} - - // Set the calculated font-size. - $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix} - - // Rendering - @if $rfs-fluid == null - // Only render static font-size if no fluid font-size is available - font-size: $rfs-static - @else - $mq-value: null - - // RFS breakpoint formatting - @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem - $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit} - @else if $rfs-breakpoint-unit == px - $mq-value: #{$rfs-breakpoint}px - @else - @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`." - - @if $rfs-class == "disable" - // Adding an extra class increases specificity, - // which prevents the media query to override the font size - &, - .disable-responsive-font-size &, - &.disable-responsive-font-size - font-size: $rfs-static - @else - font-size: $rfs-static - - @if $rfs-two-dimensional - @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) - @if $rfs-class == "enable" - .enable-responsive-font-size &, - &.enable-responsive-font-size - font-size: $rfs-fluid - @else - font-size: $rfs-fluid - - @if $rfs-safari-iframe-resize-bug-fix - // stylelint-disable-next-line length-zero-no-unit - min-width: 0vw - @else - @media (max-width: #{$mq-value}) - @if $rfs-class == "enable" - .enable-responsive-font-size &, - &.enable-responsive-font-size - font-size: $rfs-fluid - @else - font-size: $rfs-fluid - - @if $rfs-safari-iframe-resize-bug-fix - // stylelint-disable-next-line length-zero-no-unit - min-width: 0vw - -// The responsive-font-size mixin uses RFS to rescale font sizes -=responsive-font-size($fs, $important: false) - +rfs($fs, $important) - -$rfs-is-included: false !default - -@if $rfs-is-included - @warn "Watch out, RFS is included more than once!" - -$rfs-is-included: true diff --git a/scss/_rfs.scss b/sass/_rfs.scss index 54c2afd..54c2afd 100644 --- a/scss/_rfs.scss +++ b/sass/_rfs.scss |