diff options
author | MartijnCuppens <MartijnCuppens@users.noreply.github.com> | 2017-06-04 17:02:30 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-04 17:02:30 +0300 |
commit | 15e4713c62e5fc74a7ea9cbaaa197e59da992058 (patch) | |
tree | b53bd7cb5dc36f5021e92d42f8fb03033abbde5e | |
parent | dd5e960cdf2a867a86ec9c749a3b0e5f2ee113a4 (diff) |
Update README.md
-rw-r--r-- | README.md | 42 |
1 files changed, 40 insertions, 2 deletions
@@ -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 |