diff options
author | Martijn Cuppens <martijn.cuppens@intracto.com> | 2017-12-21 15:57:52 +0300 |
---|---|---|
committer | Martijn Cuppens <martijn.cuppens@intracto.com> | 2017-12-21 15:58:05 +0300 |
commit | a5697c63dc2d7bea7265c6b87beba9a78c19507f (patch) | |
tree | 7d21f55bffa2d9eab88c112ffefc025e014d37eb | |
parent | 80bd8882f16f2ab1ae891bb280bfbc5b31273496 (diff) |
Use correct configuration name for $rfs-font-size-unit; update documentation; version updatev6.0.0
-rw-r--r-- | README.md | 23 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | rfs.svg | 2 | ||||
-rw-r--r-- | scss/_rfs.scss | 35 |
4 files changed, 35 insertions, 27 deletions
@@ -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": { @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 402"><path fill="#F36" d="M3 301.17l346-200.34v200.34L175.5 401.34"/><path fill="#28B3EE" d="M3 301.17V100.83L175.1.66 349 100.83"/><path fill="#FFF" d="M100.44 212.7c11.33-2.68 23.13-12.42 23.13-30.83 0-8.27-2.43-15.44-6.9-21.15-1.52-1.95-3.28-2.8-5.25-4.35-5.9-4.6-13.8-6.37-23.25-6.37H38v102h23v-35h16.8l20.6 35h25.8l-23.76-39.3zM85.02 196H61v-30h24.02c8.82 0 15.58 6.2 15.58 14.84 0 8.97-6.76 15.16-15.58 15.16zm55.23 57.3V148.38h74.26v19.67h-51.9v22.03h50.8v19.67h-50.8v43.57h-22.33zm82.6-14.77l12.27-17.47c7.4 7.7 18.88 14.32 33.36 14.32 12.43 0 18.25-5.5 18.25-11.65 0-18.25-60.42-5.5-60.42-45 0-17.46 15.14-31.93 39.84-31.93 16.67 0 30.52 5.04 40.9 14.63L294.6 178.1c-8.5-7.86-19.83-11.48-30.53-11.48-9.44 0-14.78 4.1-14.78 10.4 0 16.5 60.22 5.34 60.22 44.5 0 19.2-13.84 33.68-42 33.68-20.3 0-34.78-6.76-44.7-16.67z"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 402" width="350" height="402"><path fill="#F36" d="M3 301.17l346-200.34v200.34L175.5 401.34"/><path fill="#28B3EE" d="M3 301.17V100.83L175.1.66 349 100.83"/><path fill="#FFF" d="M100.44 212.7c11.33-2.68 23.13-12.42 23.13-30.83 0-8.27-2.43-15.44-6.9-21.15-1.52-1.95-3.28-2.8-5.25-4.35-5.9-4.6-13.8-6.37-23.25-6.37H38v102h23v-35h16.8l20.6 35h25.8l-23.76-39.3zM85.02 196H61v-30h24.02c8.82 0 15.58 6.2 15.58 14.84 0 8.97-6.76 15.16-15.58 15.16zm55.23 57.3V148.38h74.26v19.67h-51.9v22.03h50.8v19.67h-50.8v43.57h-22.33zm82.6-14.77l12.27-17.47c7.4 7.7 18.88 14.32 33.36 14.32 12.43 0 18.25-5.5 18.25-11.65 0-18.25-60.42-5.5-60.42-45 0-17.46 15.14-31.93 39.84-31.93 16.67 0 30.52 5.04 40.9 14.63L294.6 178.1c-8.5-7.86-19.83-11.48-30.53-11.48-9.44 0-14.78 4.1-14.78 10.4 0 16.5 60.22 5.34 60.22 44.5 0 19.2-13.84 33.68-42 33.68-20.3 0-34.78-6.76-44.7-16.67z"/></svg> 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); +} + |