diff options
| -rw-r--r-- | .gitignore | 60 | ||||
| -rw-r--r-- | README.md | 66 | ||||
| -rw-r--r-- | bower.json | 2 | ||||
| -rw-r--r-- | less/rfs.less | 32 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | postcss/rfs.js | 28 | ||||
| -rw-r--r-- | sass/_rfs.sass | 62 | ||||
| -rw-r--r-- | scss/_rfs.scss | 62 | ||||
| -rw-r--r-- | stylus/rfs.styl (renamed from stylus/_rfs.styl) | 83 |
9 files changed, 234 insertions, 164 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..17d7b12 --- /dev/null +++ b/.gitignore @@ -0,0 +1,60 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + @@ -1,17 +1,12 @@ -# Responsive font size mixin [![npm][npm-image]][npm-url] +# RFS [![npm][npm-image]][npm-url] [npm-image]: https://img.shields.io/npm/v/rfs.svg [npm-url]: https://npmjs.org/package/rfs -> 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) and [Less RFS](https://github.com/MartijnCuppens/less-rfs). +> RFS (abbreviation for responsive font size) is an algorithm which which **automatically calculates the appropriate font size** based on the dimensions of the monitor or device. It's available in 5 languages: [SCSS](http://sass-lang.com/), [Sass](http://sass-lang.com/), [PostCSS](http://postcss.org/), [Less](http://lesscss.org/) & [Stylus](http://stylus-lang.com/) ## Advantages -- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the screen on -mobile devices. -- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can +- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the screen on mobile devices. +- 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. @@ -20,7 +15,7 @@ be assured.  ## Installation -You can use RFS in your project by installing it using a package manager (recommended): +RFS can be installed using a package manager (recommended): **npm:** @@ -42,12 +37,12 @@ $ bower install rfs --save **Copy/paste (not recommended):** -You can download the RFS SCSS-file and save it in your `scss/` directory. This method is not recommended because you +The source files can also be downloaded manually and used in a project. This method is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency. ## Usage -This input (SCSS): +This input: ```scss .title { @include responsive-font-size(4rem); @@ -72,16 +67,19 @@ Will generate this (CSS): } } ``` -You can also use the `rfs()` alias instead of `responsive-font-size()`. +The `rfs()` can also be used alias instead of `responsive-font-size()`. ## Configuration  -**$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: `responsive-font-size(19)` will trigger +**Minimum font size:** (in `px` or `rem`) +*SCSS, Sass & Stylus: $rfs-minimum-font-size* +*Less: @rfs-minimum-font-size* +*PostCSS: minimumFontSize* +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: `responsive-font-size(19)` will trigger dynamic rescaling, with `responsive-font-size(10)` it will just stay `10px` all the time. *Default value: `1rem`* @@ -90,7 +88,7 @@ The font size will be rendered in this unit. Possible units are `px` and `rem`. *Default value: `rem`* **$rfs-breakpoint:** (in `px`, `em` or `rem`) -Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the +Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the font size will dynamically scale. *Default value: `1200px`* @@ -110,8 +108,8 @@ Enabling the two dimensional media queries will determine the font size based on *Default value: `false`* **$rfs-generate-disable-classes** (Boolean) -When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to -disable responsive font sizes for the element and its child elements. If you don't use this, it's better to set this to +When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to +disable responsive font sizes for the element and its child elements. If you don't use this, it's better to set this to `false` to prevent the generation of unused css. This doesn't apply on font-sizes which are inherited from parents. *Default value: `true`* @@ -141,31 +139,39 @@ CSS: ## But this generates a lot of css? True. But with gzip or other compression enabled, the difference in file size is barely noticeable due the high amount -of repetitive strings. If you really want to minimize the amount of generated css, setting -`$rfs-generate-disable-classes` to `false` can make a difference (and lowers the global specificity). +of repetitive strings. If you really want to minimize the amount of generated css, setting +`$rfs-generate-disable-classes` to `false` can make a difference (and lowers the global specificity). ## Known issues Safari doesn't recalculate the value of vw in a calc()-function for font-sizes in iframes if the min-width, max-width or -width is not set in vw after the iframe is resized (edge case, but this is the case for Codepen demo's). Adding this +width is not set in vw after the iframe is resized (edge case, but this is the case for Codepen demo's). Adding this line will solve this (dirty fix): ```css _::-webkit-full-page-media, _:future, :root * {min-width: 0vw;} ``` -## Sass syntax -`.sass` file available in `sass/_rfs.sass`. Mixin can be used like this: -```sass -.title - +responsive-font-size(36) -``` - ## Best practices -- Remember to set RFS on your font size of your `html` or `body`, otherwise some text may not dynamically rescale (if +- Remember to set RFS on your font size of your `html` or `body`, otherwise some text may not dynamically rescale (if `$rfs-minimum-font-size` is decreased). Note that setting RFS on `html` can influence the value of `rem`. - Always set your line-heights relative (in `em` or unitless). - More tips and tricks with examples can be found [on this article](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6). +## Sass syntax +`.sass` file available in `sass/_rfs.sass`. Mixin can be used like this: +```sass +.title ++responsive-font-size($fs, $important) +``` + ## Demos - [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy) - [RFS in bootstrap demo](http://martijncuppens.github.io/rfs) + +# Creator +**Martijn Cuppens** +* <https://twitter.com/Martijn_Cuppens> +* <https://github.com/MartijnCuppens> + +## Copyright and license +Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE). @@ -1,7 +1,7 @@ { "name": "rfs", "description": "A scss-mixin for responsive font-sizes.", - "main": "scss/_rfs.scss", + "main": "postcss/rfs.js", "authors": [ "Martijn Cuppens <martijn.cuppens@gmail.com>" ], diff --git a/less/rfs.less b/less/rfs.less index ee82401..8ccda96 100644 --- a/less/rfs.less +++ b/less/rfs.less @@ -1,37 +1,37 @@ // stylelint-disable declaration-property-value-blacklist -// RFS mixin. +// Less RFS mixin // -// Automated font-resizing. +// Automated font-resizing // -// See https://github.com/MartijnCuppens/rfs. +// See https://github.com/MartijnCuppens/rfs -// Configuration. +// Configuration -// Minimum font size. +// Minimum font size @rfs-minimum-font-size: 1rem; @rfs-font-size-unit: rem; -// Breakpoint at where font-size starts decreasing if screen width is smaller. +// Breakpoint at where font-size starts decreasing if screen width is smaller @rfs-breakpoint: 1200px; @rfs-breakpoint-unit: px; -// Resize font-size based on screen height and width. +// Resize font-size based on screen height and width @rfs-two-dimensional: false; -// Factor of decrease. +// Factor of decrease @rfs-factor: 5; // Generate disable classes @rfs-generate-disable-classes: true; -// 1 rem = @rfs-rem-value px. +// 1 rem = @rfs-rem-value px @rfs-rem-value: 16; -// Disable RFS by setting @enable-responsive-font-sizes to false. +// Disable RFS by setting @enable-responsive-font-sizes to false @enable-responsive-font-sizes: true; -// Responsive font-size mixin. +// Responsive font-size mixin .rfs(@fs, @important: false) { & when (not(@important)) { @@ -158,18 +158,18 @@ ._rfs-render-media-query-content-dimensional(@fs, @suffix, @rfs-min, @breakpoint) { & when (@rfs-two-dimensional) { - // Calculate minimum font-size for given font-size. + // Calculate minimum font-size for given font-size @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; - // Calculate difference between given font-size and minimum font-size for given font-size. + // Calculate difference between given font-size and minimum font-size for given font-size @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vmin); ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); } & when (not(@rfs-two-dimensional)) { - // Calculate minimum font-size for given font-size. + // Calculate minimum font-size for given font-size @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; - // Calculate difference between given font-size and minimum font-size for given font-size. + // Calculate difference between given font-size and minimum font-size for given font-size @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vw); ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); @@ -198,7 +198,7 @@ } } -// The responsive-font-size mixin uses RFS to rescale font sizes. +// The responsive-font-size mixin uses RFS to rescale font sizes .responsive-font-size(@fs, @important: false) { .rfs(@fs, @important); } diff --git a/package.json b/package.json index 62e415f..bbbd650 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "rfs", "version": "7.0.4", - "description": "A scss-mixin for responsive font-sizes.", + "main": "postcss/rfs.js", + "description": "Powerfull & easy-to-use responsive font sizing system.", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/postcss/rfs.js b/postcss/rfs.js index abe02a5..9becea5 100644 --- a/postcss/rfs.js +++ b/postcss/rfs.js @@ -1,3 +1,9 @@ +// PostCSS RFS plugin +// +// Automated font-resizing +// +// See https://github.com/MartijnCuppens/rfs + 'use strict'; const postcss = require('postcss'); @@ -52,28 +58,28 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) { } rule.walkDecls(function (decl) { - // Skip if property is not in propList. + // Skip if property is not in propList if (opts.propList.indexOf(decl.prop) === -1) { return; } - // Set property to font-size. + // Set property to font-size decl.prop = 'font-size'; - // Skip if value is not in px or rem. + // Skip if value is not in px or rem if (!new RegExp(/(\d*\.?\d+)(px|rem)/g).test(decl.value)) { return; } - // Get the float value of the value. + // Get the float value of the value let value = parseFloat(decl.value); - // Multiply by remValue if value is in rem. + // Multiply by remValue if value is in rem if (decl.value.indexOf('rem') > -1) { value *= opts.remValue; } - // Render value in desired unit. + // Render value in desired unit if (opts.fontSizeUnit === 'px') { decl.value = toFixed(value, opts.unitPrecision) + 'px'; } @@ -84,24 +90,24 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) { console.error('fontSizeUnit option is not valid, it must be `px` or `rem`.'); } - // Only add media query if needed. + // Only add media query if needed if (opts.minimumFontSize >= value || opts.factor === 1) { return; } - // Calculate font-size and font-size difference. + // Calculate font-size and font-size difference let baseFontSize = opts.minimumFontSize + (value - opts.minimumFontSize) / opts.factor; const fontSizeDiff = value - baseFontSize; - // Divide by remValue if needed. + // Divide by remValue if needed if (opts.fontSizeUnit === 'rem') { baseFontSize /= opts.remValue; } - // Save selector for later. + // Save selector for later const rule_selector = rule.selector; - // Disable classes. + // Disable classes if (opts.generateDisableClasses) { const selectors = rule.selector.split(','); let ruleSelector = ''; diff --git a/sass/_rfs.sass b/sass/_rfs.sass index 9c05e49..3fa235e 100644 --- a/sass/_rfs.sass +++ b/sass/_rfs.sass @@ -1,75 +1,75 @@ // stylelint-disable declaration-property-value-blacklist -// RFS mixin. +// Sass RFS mixin // -// Automated font-resizing. +// Automated font-resizing // -// See https://github.com/MartijnCuppens/rfs. +// See https://github.com/MartijnCuppens/rfs -// Configuration. +// Configuration -// Minimum fontsize. +// Minimum font size $rfs-minimum-font-size: 1rem !default $rfs-font-size-unit: rem !default -// Breakpoint at where font-size starts decreasing if screen width is smaller. +// 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. +// Resize font-size based on screen height and width $rfs-two-dimensional: false !default -// Factor of decrease. +// Factor of decrease $rfs-factor: 5 !default // Generate disable classes $rfs-generate-disable-classes: true !default -// 1 rem = $rfs-rem-value px. +// 1 rem = $rfs-rem-value px $rfs-rem-value: 16 !default -// Disable RFS by setting $enable-responsive-font-sizes to false. +// 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. + // 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. +// 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) @else if unit($rfs-minimum-font-size) == "rem" $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1 / $rfs-rem-value) -// Remove unit from $rfs-breakpoint for calculations. +// Remove unit from $rfs-breakpoint for calculations @if unit($rfs-breakpoint) == "px" $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1) @else if unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em" $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value) -// Responsive font-size mixin. +// Responsive font-size mixin =rfs($fs, $important: false) $rfs-suffix: "" - // Add !important suffix if needed. + // Add !important suffix if needed @if $important $rfs-suffix: " !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 $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 type-of($fs) != "number" or not unitless($fs) and unit($fs) != "px" and unit($fs) != "rem" or $fs == 0 font-size: #{$fs}#{$rfs-suffix} @else - // Variables for storing static and fluid rescaling. + // Variables for storing static and fluid rescaling $rfs-static: null $rfs-fluid: null - // Remove px-unit from $fs for calculations. + // Remove px-unit from $fs for calculations @if unit($fs) == "px" $fs: $fs / ($fs * 0 + 1) @else if unit($fs) == "rem" $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value) - // Set default font-size. + // 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 @@ -80,45 +80,45 @@ $enable-responsive-font-sizes: true !default @if type-of($rfs-factor) != "number" or $rfs-factor < 1 @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater or equal to 1." - // Only add media query if font-size is bigger as the minimum font-size. - // If $rfs-factor == 1, no rescaling will take place. + // Only add media query if font-size is bigger as the minimum font-size + // If $rfs-factor == 1, no rescaling will take place @if $fs > $rfs-minimum-font-size and $rfs-factor != 1 $min-width: null $variable-unit: null - // Calculate minimum font-size for given font-size. + // Calculate minimum font-size for given font-size $fs-min: $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor - // Calculate difference between given font-size and minimum font-size for given font-size. + // Calculate difference between given font-size and minimum font-size for given font-size $fs-diff: $fs - $fs-min - // Minimum font-size formatting. - // No need to check if the unit is valid, because we did that before. + // Minimum font-size formatting + // No need to check if the unit is valid, because we did that before @if $rfs-font-size-unit == rem $min-width: #{$fs-min / $rfs-rem-value}rem @else $min-width: #{$fs-min}px - // If two-dimensional, use smallest of screen width and height. + // If two-dimensional, use smallest of screen width and height @if $rfs-two-dimensional $variable-unit: vmin @else $variable-unit: vw - // Calculate the variable width between 0 and $rfs-breakpoint. + // 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. + // Rendering @if $rfs-fluid == null - // Only render static font-size if no fluid font-size is available. + // Only render static font-size if no fluid font-size is available font-size: $rfs-static @else $mq-value: null - // RFS breakpoint formatting. + // 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 @@ -143,6 +143,6 @@ $enable-responsive-font-sizes: true !default @media (max-width: #{$mq-value}) font-size: $rfs-fluid -// The responsive-font-size mixin uses RFS to rescale font sizes. +// The responsive-font-size mixin uses RFS to rescale font sizes =responsive-font-size($fs, $important: false) +rfs($fs, $important) diff --git a/scss/_rfs.scss b/scss/_rfs.scss index aedbec1..da52be8 100644 --- a/scss/_rfs.scss +++ b/scss/_rfs.scss @@ -1,42 +1,42 @@ // stylelint-disable declaration-property-value-blacklist -// RFS mixin. +// SCSS RFS mixin // -// Automated font-resizing. +// Automated font-resizing // -// See https://github.com/MartijnCuppens/rfs. +// See https://github.com/MartijnCuppens/rfs -// Configuration. +// Configuration -// Minimum fontsize. +// Minimum font size $rfs-minimum-font-size: 1rem !default; $rfs-font-size-unit: rem !default; -// Breakpoint at where font-size starts decreasing if screen width is smaller. +// 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. +// Resize font-size based on screen height and width $rfs-two-dimensional: false !default; -// Factor of decrease. +// Factor of decrease $rfs-factor: 5 !default; // Generate disable classes $rfs-generate-disable-classes: true !default; -// 1 rem = $rfs-rem-value px. +// 1 rem = $rfs-rem-value px $rfs-rem-value: 16 !default; -// Disable RFS by setting $enable-responsive-font-sizes to false. +// 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. + // 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. +// 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); } @@ -44,7 +44,7 @@ $enable-responsive-font-sizes: true !default; $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1 / $rfs-rem-value); } -// Remove unit from $rfs-breakpoint for calculations. +// Remove unit from $rfs-breakpoint for calculations @if unit($rfs-breakpoint) == "px" { $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); } @@ -52,25 +52,25 @@ $enable-responsive-font-sizes: true !default; $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); } -// Responsive font-size mixin. +// Responsive font-size mixin @mixin rfs($fs, $important: false) { $rfs-suffix: ""; - // Add !important suffix if needed. + // Add !important suffix if needed @if $important { $rfs-suffix: " !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 $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 type-of($fs) != "number" or not unitless($fs) and unit($fs) != "px" and unit($fs) != "rem" or $fs == 0 { font-size: #{$fs}#{$rfs-suffix}; } @else { - // Variables for storing static and fluid rescaling. + // Variables for storing static and fluid rescaling $rfs-static: null; $rfs-fluid: null; - // Remove px-unit from $fs for calculations. + // Remove px-unit from $fs for calculations @if unit($fs) == "px" { $fs: $fs / ($fs * 0 + 1); } @@ -78,7 +78,7 @@ $enable-responsive-font-sizes: true !default; $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); } - // Set default font-size. + // Set default font-size @if $rfs-font-size-unit == rem { $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; } @@ -93,20 +93,20 @@ $enable-responsive-font-sizes: true !default; @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater or equal to 1."; } - // Only add media query if font-size is bigger as the minimum font-size. - // If $rfs-factor == 1, no rescaling will take place. + // Only add media query if font-size is bigger as the minimum font-size + // If $rfs-factor == 1, no rescaling will take place @if $fs > $rfs-minimum-font-size and $rfs-factor != 1 { $min-width: null; $variable-unit: null; - // Calculate minimum font-size for given font-size. + // Calculate minimum font-size for given font-size $fs-min: $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor; - // Calculate difference between given font-size and minimum font-size for given font-size. + // Calculate difference between given font-size and minimum font-size for given font-size $fs-diff: $fs - $fs-min; - // Minimum font-size formatting. - // No need to check if the unit is valid, because we did that before. + // Minimum font-size formatting + // No need to check if the unit is valid, because we did that before @if $rfs-font-size-unit == rem { $min-width: #{$fs-min / $rfs-rem-value}rem; } @@ -114,7 +114,7 @@ $enable-responsive-font-sizes: true !default; $min-width: #{$fs-min}px; } - // If two-dimensional, use smallest of screen width and height. + // If two-dimensional, use smallest of screen width and height @if $rfs-two-dimensional { $variable-unit: vmin; } @@ -122,22 +122,22 @@ $enable-responsive-font-sizes: true !default; $variable-unit: vw; } - // Calculate the variable width between 0 and $rfs-breakpoint. + // 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. + // Rendering @if $rfs-fluid == null { - // Only render static font-size if no fluid font-size is available. + // Only render static font-size if no fluid font-size is available font-size: $rfs-static; } @else { $mq-value: null; - // RFS breakpoint formatting. + // RFS breakpoint formatting @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; } @@ -175,7 +175,7 @@ $enable-responsive-font-sizes: true !default; } } -// The responsive-font-size mixin uses RFS to rescale font sizes. +// The responsive-font-size mixin uses RFS to rescale font sizes @mixin responsive-font-size($fs, $important: false) { @include rfs($fs, $important); } diff --git a/stylus/_rfs.styl b/stylus/rfs.styl index 330dceb..90e2ec2 100644 --- a/stylus/_rfs.styl +++ b/stylus/rfs.styl @@ -1,73 +1,73 @@ // stylelint-disable declaration-property-value-blacklist -// RFS mixin. +// Stylus RFS mixin // -// Automated font-resizing. +// Automated font-resizing // -// See https://github.com/MartijnCuppens/rfs. +// See https://github.com/MartijnCuppens/rfs -// Configuration. +// Configuration -// Minimum fontsize. +// Minimum font size $rfs-minimum-font-size = 1rem $rfs-font-size-unit = rem -// Breakpoint at where font-size starts decreasing if screen width is smaller. +// Breakpoint at where font-size starts decreasing if screen width is smaller $rfs-breakpoint = 1200px $rfs-breakpoint-unit = px -// Resize font-size based on screen height and width. +// Resize font-size based on screen height and width $rfs-two-dimensional = false -// Factor of decrease. +// Factor of decrease $rfs-factor = 5 // Generate disable classes $rfs-generate-disable-classes = true -// 1 rem = $rfs-rem-value px. +// 1 rem = $rfs-rem-value px $rfs-rem-value = 16 -// Disable RFS by setting $enable-responsive-font-sizes to false. +// Disable RFS by setting $enable-responsive-font-sizes to false $enable-responsive-font-sizes = true if $enable-responsive-font-sizes == false - // If $rfs-factor is set to 1, fluid font-resizing is disabled. + // 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. +// Remove px-unit from $rfs-minimum-font-size for calculations if unit($rfs-minimum-font-size) == "px" - $rfs-minimum-font-size = unit($rfs-minimum-font-size, '') + $rfs-minimum-font-size = unit($rfs-minimum-font-size, "") else if unit($rfs-minimum-font-size) == "rem" - $rfs-minimum-font-size = unit($rfs-minimum-font-size * $rfs-rem-value, '') + $rfs-minimum-font-size = unit($rfs-minimum-font-size * $rfs-rem-value, "") -// Remove unit from $rfs-breakpoint for calculations. +// Remove unit from $rfs-breakpoint for calculations if unit($rfs-breakpoint) == "px" - $rfs-breakpoint = unit($rfs-breakpoint, '') + $rfs-breakpoint = unit($rfs-breakpoint, "") else if unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em" - $rfs-breakpoint = unit($rfs-breakpoint / $rfs-rem-value, '') + $rfs-breakpoint = unit($rfs-breakpoint * $rfs-rem-value, "") -// Responsive font-size mixin. +// Responsive font-size mixin rfs($fs, $important = false) $rfs-suffix = "%s" % () - // Add !important suffix if needed. + // Add !important suffix if needed if $important $rfs-suffix = !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 $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 type-of($fs) != "unit" or !unitless($fs) and unit($fs) != "px" and unit($fs) != "rem" or $fs == 0 font-size: "%s%s" % ($fs $rfs-suffix) else - // Variables for storing static and fluid rescaling. + // Variables for storing static and fluid rescaling $rfs-static = null $rfs-fluid = null - // Remove px-unit from $fs for calculations. + // Remove px-unit from $fs for calculations if unit($fs) == px - $fs = unit($fs, '') + $fs = unit($fs, "") else if unit($fs) == rem - $fs = unit($fs / $rfs-rem-value, '') + $fs = unit($fs / $rfs-rem-value, "") // Set default font-size. if $rfs-font-size-unit == rem @@ -75,56 +75,56 @@ rfs($fs, $important = false) else if $rfs-font-size-unit == px $rfs-static = "%s%s" % (unit($fs, px) $rfs-suffix) else - @error "`$rfs-font-size-unit` is not a valid unit for $rfs-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) != "unit" or $rfs-factor < 1 - @error "`$rfs-factor` is not a valid $rfs-factor, it must be greater or equal to 1." + error("`$rfs-factor` is not a valid $rfs-factor, it must be greater or equal to 1.") - // Only add media query if font-size is bigger as the minimum font-size. - // If $rfs-factor == 1, no rescaling will take place. + // Only add media query if font-size is bigger as the minimum font-size + // If $rfs-factor == 1, no rescaling will take place if $fs > $rfs-minimum-font-size and $rfs-factor != 1 $min-width = null $variable-unit = null - // Calculate minimum font-size for given font-size. + // Calculate minimum font-size for given font-size $fs-min = $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor - // Calculate difference between given font-size and minimum font-size for given font-size. + // Calculate difference between given font-size and minimum font-size for given font-size $fs-diff = $fs - $fs-min - // Minimum font-size formatting. - // No need to check if the unit is valid, because we did that before. + // Minimum font-size formatting + // No need to check if the unit is valid, because we did that before if $rfs-font-size-unit == rem $min-width = unit($fs-min / $rfs-rem-value, rem) else $min-width = unit($fs-min, px) - // If two-dimensional, use smallest of screen width and height. + // If two-dimensional, use smallest of screen width and height if $rfs-two-dimensional $variable-unit = vmin else $variable-unit = vw - // Calculate the variable width between 0 and $rfs-breakpoint. + // Calculate the variable width between 0 and $rfs-breakpoint $variable-width = "%s%s" % ($fs-diff * 100 / $rfs-breakpoint $variable-unit) - // Set the calculated font-size. + // Set the calculated font-size $rfs-fluid = "calc(%s + %s)%s" % ($min-width $variable-width $rfs-suffix) - // Rendering. + // Rendering if $rfs-fluid == null - // Only render static font-size if no fluid font-size is available. + // Only render static font-size if no fluid font-size is available font-size: $rfs-static else $mq-value = null - // RFS breakpoint formatting. + // RFS breakpoint formatting if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem $mq-value = unit($rfs-breakpoint / $rfs-rem-value, $rfs-breakpoint-unit) else if $rfs-breakpoint-unit == px $mq-value = unit($rfs-breakpoint, px) else - @error "`$rfs-breakpoint-unit` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`." + error("`$rfs-breakpoint-unit` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.") if $rfs-generate-disable-classes // Adding an extra class increases specificity, @@ -143,9 +143,6 @@ rfs($fs, $important = false) @media (max-width: $mq-value) font-size: $rfs-fluid -// The responsive-font-size mixin uses RFS to rescale font sizes. +// The responsive-font-size mixin uses RFS to rescale font sizes responsive-font-size($fs, $important = false) rfs($fs, $important) - -.title - responsive-font-size(40) |