Comparing version
{ | ||
"name": "less-rfs", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"description": "A less mixin for responsive font-sizes.", | ||
@@ -5,0 +5,0 @@ "main": "less/rfs.less", |
# Responsive font size mixin [![npm][npm-image]][npm-url] | ||
[npm-image]: https://img.shields.io/npm/v/less-rfs.svg | ||
[npm-url]: https://npmjs.org/package/less-rfs | ||
> This package lets you use the `.responsive-font-size` mixin which **automatically calculates the appropriate font | ||
> 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 | ||
RFS (abbreviation for responsive font size) is the name of the algorithm behind the mixin. It's also used by | ||
[(SCSS) RFS](https://github.com/MartijnCuppens/rfs) and | ||
@@ -13,5 +13,5 @@ [PostCSS RFS](https://github.com/MartijnCuppens/postcss-rfs). | ||
## Advantages | ||
- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the screen on | ||
- 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 | ||
- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can | ||
be assured. | ||
@@ -47,3 +47,3 @@ - **Super easy** to use, no need to define complex configurations for each font size. | ||
You can download the RFS SCSS-file and save it in your `scss/` directory. This method is not recommended because you | ||
You can download the RFS SCSS-file and save it in your `scss/` directory. This method is not recommended because you | ||
lose the ability to easily and quickly manage and update RFS as a dependency. | ||
@@ -86,4 +86,4 @@ | ||
**@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 | ||
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. | ||
@@ -97,3 +97,3 @@ *Default value: `1rem`* | ||
**@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. | ||
@@ -118,4 +118,4 @@ *Default value: `1200px`* | ||
**@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. | ||
@@ -150,8 +150,8 @@ *Default value: `true`* | ||
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): | ||
@@ -163,3 +163,3 @@ ```css | ||
## 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`. | ||
@@ -169,3 +169,3 @@ - Always set your line-heights relative (in `em` or unitless). | ||
## Demos | ||
- [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy) | ||
- [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/dJLavJ) | ||
- [RFS in bootstrap demo](http://martijncuppens.github.io/rfs) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
35949
-41.66%