From 6e651a6d0acb6f1410a4935a60c16a20f24aa0aa Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 7 Nov 2018 23:10:35 +0200 Subject: README.md: Markdown tweaks --- README.md | 79 ++++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 26 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 8b526a8..6c961f0 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # RFS [![npm][npm-image]][npm-url] -[npm-image]: https://img.shields.io/npm/v/rfs.svg -[npm-url]: https://npmjs.org/package/rfs -> RFS (abbreviation for responsive font size) is an algorithm which **automatically calculates the appropriate font size** based on the dimensions of the browser viewport. It's available in 5 languages: +> RFS (abbreviation for responsive font size) is an algorithm which **automatically calculates the appropriate font size** based on the dimensions of the browser viewport. It's available in 5 languages: > - [SCSS](http://sass-lang.com/) > - [Sass](http://sass-lang.com/) > - [PostCSS](http://postcss.org/) @@ -10,9 +8,9 @@ > - [Stylus](http://stylus-lang.com/) ## Advantages + - Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the viewport on small devices. -- The minimum font size (configuration variable) 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. @@ -20,23 +18,24 @@ be assured. ![RFS](http://i.imgur.com/gJH6m6g.gif) ## Installation + RFS can be installed using a package manager (recommended): **npm:** -``` +```sh $ npm install rfs --save ``` **yarn:** -``` +```sh $ yarn add rfs ``` **Bower:** -``` +```sh $ bower install rfs --save ``` @@ -47,7 +46,9 @@ lose the ability to easily and quickly manage and update RFS as a dependency. ## Usage + ### SCSS + ```scss .title { @include responsive-font-size(4rem); // OR @include responsive-font-size(64px); OR @include rfs(64); @@ -55,12 +56,14 @@ lose the ability to easily and quickly manage and update RFS as a dependency. ``` ### Sass + ```sass .title +responsive-font-size(4rem) // OR +responsive-font-size(64px) OR +rfs(64) ``` ### PostCSS + ```postcss .title { responsive-font-size: 4rem; // OR responsive-font-size: 64px; OR rfs: 64; @@ -68,6 +71,7 @@ lose the ability to easily and quickly manage and update RFS as a dependency. ``` ### Less + ```less .title { .responsive-font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64); @@ -75,11 +79,14 @@ lose the ability to easily and quickly manage and update RFS as a dependency. ``` ### Stylus + ```stylus .title responsive-font-size(4rem) // OR responsive-font-size(64px) OR rfs(64) ``` + ### Generated css + ```css .title { font-size: 4rem; @@ -91,11 +98,13 @@ lose the ability to easily and quickly manage and update RFS as a dependency. } } ``` + ## Configuration ![RFS visualisation](https://i.imgur.com/yaOonFe.png) -### Minimum font size (unit in `px` or `rem`) ### +### Minimum font size (unit in `px` or `rem`) + > **SCSS, Sass & Stylus:** `$rfs-minimum-font-size` > **Less:** `@rfs-minimum-font-size` > **PostCSS:** `minimumFontSize` @@ -104,7 +113,8 @@ The option will prevent the font size from becoming too small on smaller screens *Default value: `1rem`* -### Font size unit (`px` or `rem`) ### +### Font size unit (`px` or `rem`) + > **SCSS, Sass & Stylus:** `$rfs-font-size-unit` > **Less:** `@rfs-font-size-unit` > **PostCSS:** `fontSizeUnit` @@ -113,7 +123,8 @@ The output font size will be rendered in this unit. *Default value: `rem`* -### Breakpoint (in `px`, `em` or `rem`) ### +### Breakpoint (in `px`, `em` or `rem`) + > **SCSS, Sass & Stylus:** `$rfs-breakpoint` > **Less:** `@rfs-breakpoint` > **PostCSS:** `breakpoint` @@ -122,7 +133,8 @@ Above this breakpoint, the font size will be equal to the font size you passed t *Default value: `1200px`* -### Breakpoint unit (`px`, `em` or `rem`) ### +### Breakpoint unit (`px`, `em` or `rem`) + > **SCSS, Sass & Stylus:** `$rfs-breakpoint-unit` > **Less:** `@rfs-breakpoint-unit` > **PostCSS:** `breakpointUnit` @@ -131,7 +143,8 @@ The width of the max width in the media query will be rendered in this unit. *Default value: `px`* -### Factor (number) ### +### Factor (number) + > **SCSS, Sass & Stylus:** `$rfs-factor` > **Less:** `@rfs-factor` > **PostCSS:** `factor` @@ -140,7 +153,8 @@ This value determines the strength of font size resizing. The higher the factor, *Default value: `5`* -### Two dimensional (boolean) ### +### Two dimensional (boolean) + > **SCSS, Sass & Stylus:** `$rfs-two-dimensional` > **Less:** `@rfs-two-dimensional` > **PostCSS:** `twoDimensional` @@ -149,23 +163,26 @@ Enabling the two dimensional media queries will determine the font size based on *Default value: `false`* -### Class (boolean) ### +### Class (boolean) + > **SCSS, Sass & Stylus:** `$rfs-class` > **Less:** `@rfs-class` > **PostCSS:** `class` -RFS can ben enabled or disabled with a class. There are 3 options: -- `disable` -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. -- `enable` -RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements. -- `false` -No extra classes are generated. +RFS can be enabled or disabled with a class. There are 3 options: + +- `disable` + 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. +- `enable` + RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements. +- `false` + No extra classes are generated. *Default value: `false`* -### Safari iframe resize bug fix (boolean) ### +### Safari iframe resize bug fix (boolean) + > **SCSS, Sass & Stylus:** `$rfs-safari-iframe-resize-bug-fix` > **Less:** `@rfs-safari-iframe-resize-bug-fix` > **PostCSS:** `safariIframeResizeBugFix` @@ -176,6 +193,7 @@ Safari doesn't resize its font size in an iframe if the iframe is resized. To fi ## !important + By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`) ```scss @@ -185,6 +203,7 @@ By setting a second parameter to true, `!important` is added after the font-size ``` CSS: + ```css .label { font-size: 2.5rem !important; @@ -198,19 +217,27 @@ CSS: ``` ## Best practices + - Remember to set RFS on your font size of your `html` or `body` (especially if the minimum font size is lowered), otherwise some text may not dynamically rescale. 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 -[here](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6) (written when only the SCSS version was made). +- More tips and tricks with examples can be found [here](https://medium.com/@martijn.cuppens/magic-font-resizing-with-rfs-b5d781296dd6) (written when only the SCSS version was made). + +## Demos -## Demos - [Simple Codepen Demo](http://codepen.io/MartijnCuppens/pen/ZBjdMy) - [RFS in bootstrap demo](http://martijncuppens.github.io/rfs) ## Creator + **Martijn Cuppens** + * * ## Copyright and license + Code released under [the MIT license](https://github.com/project-rfs/rfs/blob/master/LICENSE). + + +[npm-image]: https://img.shields.io/npm/v/rfs.svg +[npm-url]: https://npmjs.org/package/rfs -- cgit v1.2.3