Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/rfs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMartijn Cuppens <martijn.cuppens@gmail.com>2017-08-24 15:42:07 +0300
committerMartijn Cuppens <martijn.cuppens@gmail.com>2017-08-24 15:42:07 +0300
commit7531b83a6b1c1faa2203bba1dd42549631bf9f3e (patch)
treee4ed4ff87ae07863a1031ac6914c60ccbc95ed54
parent6cd55cdd9a7b266e1a03062e5c2124d3edab24d2 (diff)
Update documentation
-rw-r--r--README.md19
1 files changed, 6 insertions, 13 deletions
diff --git a/README.md b/README.md
index c74665c..ac42d35 100644
--- a/README.md
+++ b/README.md
@@ -55,18 +55,11 @@ Will generate this (CSS):
```
## Advantages
-- Font sizes will *rescale for every screen width*, this prevents long words from being chopped off the screen
-- *Super easy* to use, no need to define complex configurations for each font-size
+- Font sizes will **rescale for every screen width**, this prevents long words from being chopped off the screen
+- **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
- Rem-based font sizes will allow the user to change his default font size in his browser. People with limited vision can therefore increase their font size to increase readability.
-## How does it work?
-RFS splits the calculation of the font-size in two:
-
-- 1 Static font-size for bigger screens
-- 1 adaptive font size which decreases along with the screen width of your browser. This font size is calculated in a media query with css’s calc-function.
-There are some configuration variables which can influence the font-size decreasing.
-
## Configuration
![RFS visualisation](http://i.imgur.com/KpcsXUk.png)
@@ -75,14 +68,14 @@ There are configuration variables which influence the calculation of the font si
**$rfs-minimum-font-size:** (in `px`)
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): `rfs(17)` will trigger dynamic rescaling, with `rfs(10)` it will just stay `10px` all the time.
-Default value: `12`
+*Default value: `12`*
**$rfs-minimum-font-size-unit:** (string)
The font size will be rendered in this unit. Possible units are `px` and `rem`. This setting doesn't influence `$rfs-minimum-font-size`, which will always be configured in `px`.
-Default value: `rem`
+*Default value: `rem`*
**$rfs-breakpoint:** (in `px`)
-This where dynamic rescaling begins. Above this breakpoint, the font size will be equal to the font size you passed to the mixin.
+This is the point where dynamic rescaling begins. Above this breakpoint, the font size will be equal to the font size you passed to the mixin.
*Default value: `1200`*
**$rfs-breakpoint-unit:** (string)
@@ -96,7 +89,7 @@ Let’s take an example from the graph above: The font size `rfs(47)` at a scree
Calculate the difference between the font-size (47) and `$rfs-minimum-font-size` (12)
`47 - 12 = 35`
-Divide this number by the $rfs-factor (5)
+Divide this number by the `$rfs-factor` (5)
`35 / 5 = 7`
Add this number to $rfs-minimum-font-size (12)