From a5697c63dc2d7bea7265c6b87beba9a78c19507f Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 21 Dec 2017 13:57:52 +0100 Subject: Use correct configuration name for $rfs-font-size-unit; update documentation; version update --- README.md | 23 ++++++++++++++--------- package.json | 2 +- rfs.svg | 2 +- scss/_rfs.scss | 35 +++++++++++++++++++---------------- 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index fa067cc..61c70b0 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,18 @@ -# RFS [![npm][npm-image]][npm-url] +# RFS mixin[![npm][npm-image]][npm-url] [npm-image]: https://img.shields.io/npm/v/rfs.svg [npm-url]: https://npmjs.org/package/rfs -RFS stands for Responsive Font Size and is an easy to use **SCSS-mixin** which **automatically calculates the -appropriate font size** based on the dimensions of the monitor or device. +> This package lets you use the `responsive-font-size` mixin which **automatically calculates the appropriate font +size** based on the dimensions of the monitor or device. +## What is RFS? +RFS (abbreviation for responsive font size) is the name of the algorithm behind the mixin. It's also used by +[PostCSS RFS](https://github.com/MartijnCuppens/postcss-rfs). ## Advantages - Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen on mobile devices. -- The minimum font size 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. - Font sizes of all text elements will always remain in relation with each other. @@ -46,7 +50,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency. This input (SCSS): ```scss .title { - @include font-size(62); + @include responsive-font-size(62); } ``` @@ -63,7 +67,8 @@ Will generate this (CSS): } ``` In this case a value without unit was passed to the mixin (`62`), which is interpreted as `62px`. It's also possible to -pass font sizes in rem-units. Since v5.0.0 `font-size()` is added as an alias for `rfs()`. +pass font sizes in rem-units. You can also use `rfs()` instead of `responsive-font-size()` which is a bit +shorter to type. ## Configuration @@ -75,11 +80,11 @@ configuration is used. **$rfs-minimum-font-size:** (in `px` or `rem`) Font sizes which are calculated by RFS will never be lower than this size. However, you can still pass a smaller font -size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): `font-size(19)` will -trigger dynamic rescaling, with `font-size(10)` it will just stay `10px` all the time. +size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): `responsive-font-size(19)` will +trigger dynamic rescaling, with `responsive-font-size(10)` it will just stay `10px` all the time. *Default value: `14px`* -**$rfs-minimum-font-size-unit:** (string) +**$rfs-font-size-unit:** (string) The font size will be rendered in this unit. Possible units are `px` and `rem`. *Default value: `px`* diff --git a/package.json b/package.json index 8f3bab1..da6ba95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rfs", - "version": "5.0.2", + "version": "6.0.0", "description": "A scss-mixin for responsive font-sizes.", "main": "scss/_rfs.scss", "scripts": { diff --git a/rfs.svg b/rfs.svg index c6da528..6ff31f5 100644 --- a/rfs.svg +++ b/rfs.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/scss/_rfs.scss b/scss/_rfs.scss index aa25144..789d23d 100644 --- a/scss/_rfs.scss +++ b/scss/_rfs.scss @@ -1,7 +1,4 @@ -// The font-size mixin uses RFS to rescale font sizes. -@mixin font-size($fs, $important: false) { - @include rfs($fs, $important); -} +// stylelint-disable declaration-property-value-blacklist // RFS mixin. // @@ -9,18 +6,11 @@ // // See https://github.com/MartijnCuppens/rfs. -// Disable RFS by setting $enable-responsive-font-sizes to false. -$enable-responsive-font-sizes: true !default; -@if $enable-responsive-font-sizes == false { - // If $rfs-factor is set to 1, fluid font-resizing is disabled. - $rfs-factor: 1; -} - // Configuration. // Minimum fontsize. $rfs-minimum-font-size: 14px !default; -$rfs-minimum-font-size-unit: px !default; +$rfs-font-size-unit: px !default; // Breakpoint at where font-size starts decreasing if screen width is smaller. $rfs-breakpoint: 1200px !default; @@ -35,6 +25,13 @@ $rfs-factor: 5 !default; // 1 rem = $rfs-rem-value px. $rfs-rem-value: 16 !default; +// Disable RFS by setting $enable-responsive-font-sizes to false. +$enable-responsive-font-sizes: true !default; +@if $enable-responsive-font-sizes == false { + // If $rfs-factor is set to 1, fluid font-resizing is disabled. + $rfs-factor: 1; +} + // Remove px-unit from $rfs-minimum-font-size for calculations. @if unit($rfs-minimum-font-size) == "px" { $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1); @@ -75,12 +72,12 @@ $rfs-rem-value: 16 !default; } // Set default font-size. - @if $rfs-minimum-font-size-unit == rem { + @if $rfs-font-size-unit == rem { $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; - } @else if $rfs-minimum-font-size-unit == px { + } @else if $rfs-font-size-unit == px { $rfs-static: #{$fs}px#{$rfs-suffix}; } @else { - @error "`#{$rfs-minimum-font-size-unit}` is not a valid unit for $rfs-minimum-font-size-unit. Use `px` or `rem`."; + @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; } @if type-of($rfs-factor) != "number" or $rfs-factor < 1 { @@ -100,7 +97,7 @@ $rfs-rem-value: 16 !default; // Minimum font-size formatting. // No need to check if the unit is valid, because we did that before. - @if $rfs-minimum-font-size-unit == rem { + @if $rfs-font-size-unit == rem { $min-width: #{$fs-min / $rfs-rem-value}rem; } @else { $min-width: #{$fs-min}px; @@ -150,3 +147,9 @@ $rfs-rem-value: 16 !default; } } } + +// The responsive-font-size mixin uses RFS to rescale font sizes. +@mixin responsive-font-size($fs, $important: false) { + @include rfs($fs, $important); +} + -- cgit v1.2.3