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:
authorMartijnCuppens <MartijnCuppens@users.noreply.github.com>2017-06-04 17:02:30 +0300
committerGitHub <noreply@github.com>2017-06-04 17:02:30 +0300
commit15e4713c62e5fc74a7ea9cbaaa197e59da992058 (patch)
treeb53bd7cb5dc36f5021e92d42f8fb03033abbde5e
parentdd5e960cdf2a867a86ec9c749a3b0e5f2ee113a4 (diff)
Update README.md
-rw-r--r--README.md42
1 files changed, 40 insertions, 2 deletions
diff --git a/README.md b/README.md
index 50e04f2..dc2884f 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,40 @@
-# rfs
-RFS scss mixin
+# RFS
+
+## About
+RFS stands for Responsive Font-Size, easy to remember, easy to use. It’s a desktop-first approach which automatically calculates the correct font-size for every screen width. Desktop-first approach means you just have got to define your font-size for big screens and the font-size will automatically decrease for smaller screens. RFS is a SCSS-mixin which generates the responsive css for you.
+
+## The main advantages of using RFS
+- Font-sizes will rescale for every screen width
+- Super easy to use, no need to define mappings 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 bad vision can therefore set their font-size bigger to increase readability.
+
+## What does this algorithm do?
+The algorithm splits the calculation of the font-size in 2:
+
+- 1 Static font-size for bigger screens
+- 1 adaptive font-size which decreases when the screen-width of your browser decreases. This font-size is calculated in a media-query with css’ calc-function.
+There are some configuration variables which can influence the font-size decreasing.
+
+## The code
+This input (SCSS):
+```scss
+.title {
+ @include rfs(60);
+}
+```
+
+Will generate this (CSS):
+```css
+.title {
+ font-size: 3.75rem;
+}
+
+@media (max-width: 75rem) {
+ .title {
+ font-size: calc(1.35rem + 3.2vw);
+ }
+}
+```
+## Live demo
+http://codepen.io/MartijnCuppens/pen/ZBjdMy