diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 69 |
1 files changed, 48 insertions, 21 deletions
@@ -1,4 +1,4 @@ -# RFS mixin[![npm][npm-image]][npm-url] +# Responsive font size mixin [![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 @@ -50,47 +50,46 @@ lose the ability to easily and quickly manage and update RFS as a dependency. This input (SCSS): ```scss .title { - @include responsive-font-size(62); + @include responsive-font-size(4rem); + // OR: + // @include responsive-font-size(64px); + // OR: + // @include responsive-font-size(64); } ``` Will generate this (CSS): ```css .title { - font-size: 62px; + font-size: 4rem; } @media (max-width: 1200px) { .title { - font-size: calc(23.6px + 3.2vw); + font-size: calc(1.6rem + 3.2vw); } } ``` -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. You can also use `rfs()` instead of `responsive-font-size()` which is a bit -shorter to type. +You can also use the `rfs()` alias instead of `responsive-font-size()`. ## Configuration - - -There are configuration variables which influence the calculation of the font size. In the graph above the default -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): `responsive-font-size(19)` will -trigger dynamic rescaling, with `responsive-font-size(10)` it will just stay `10px` all the time. -*Default value: `14px`* +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`* **$rfs-font-size-unit:** (string) -The font size will be rendered in this unit. Possible units are `px` and `rem`. -*Default value: `px`* +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 -font size will dynamically scale. +font size will dynamically scale. *Default value: `1200px`* **$rfs-breakpoint-unit:** (string) @@ -100,7 +99,7 @@ The width of `$rfs-breakpoint` will be rendered in this unit. Possible units are **$rfs-factor:** (number) This value determines the strength of font size resizing. The higher `$rfs-factor`, the less difference there is between font sizes on small screens. The lower `$rfs-factor`, the less influence RFS has, which results in bigger font sizes for -small screens. `$rfs-factor` must me greater than 1, setting it to 1 will disable dynamic rescaling. +small screens. `$rfs-factor` must me greater than 1, setting it to 1 will disable dynamic rescaling. *Default value: `5`* **$rfs-two-dimensional** (Boolean) @@ -108,15 +107,43 @@ Enabling the two dimensional media queries will determine the font size based on `vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode. *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 +`false` to prevent the generation of unused css. This doesn't apply on font-sizes which are inherited from parents. +*Default value: `true`* + +## !important +By setting a second parameter to true, `!important` is added after the font-size value. + +```scss +.label { + @include responsive-font-size(2.5rem, true); +} +``` + +CSS: +```css +.label { + font-size: 2.5rem !important; +} + +@media (max-width: 1200px) { + .label { + font-size: calc(1.3rem + 1.6vw) !important; + } +} +``` + ## 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 line will solve this: +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 line will solve this (dirty fix): ```css _::-webkit-full-page-media, _:future, :root * {min-width: 0vw;} ``` ## Best practices -- Remember to set RFS on your font size of your `html` or `body`, otherwise some text may not dynamically rescale. Note -that setting RFS on `html` will influence the value of `rem`. +- 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). |