Responsive font-sizes implementation #23157
Conversation
scss/mixins/_rfs.scss
Outdated
|
|
||
| // Remove px-unit from $fs for calculations. | ||
| @if (unit($fs) == 'px') { | ||
| $fs: $fs / ($fs * 0 + 1) |
There was a problem hiding this comment.
Declaration should be terminated by a semicolon
scss/mixins/_rfs.scss
Outdated
| } @else { | ||
|
|
||
| // Remove px-unit from $fs for calculations. | ||
| @if (unit($fs) == 'px') { |
scss/mixins/_rfs.scss
Outdated
| } | ||
|
|
||
| // If $fs is not a number (like inherit) or $fs has a unit (like 1.5em) or $ is 0, just print the value. | ||
| @if type-of($fs) != 'number' or (not unitless($fs) and unit($fs) != 'px') or $fs == 0 { |
scss/mixins/_rfs.scss
Outdated
|
|
||
| // Add !important suffix if needed. | ||
| @if ($important) { | ||
| $rfs-suffix: ' !important'; |
scss/mixins/_rfs.scss
Outdated
| // Responsive font-size mixin. | ||
| @mixin rfs($fs, $important: false) { | ||
|
|
||
| $rfs-suffix: ''; |
scss/mixins/_rfs.scss
Outdated
|
|
||
| // Remove px-unit from $rfs-breakpoint for calculations. | ||
| @if (unit($rfs-breakpoint) == 'px') { | ||
| $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1) |
There was a problem hiding this comment.
Declaration should be terminated by a semicolon
scss/mixins/_rfs.scss
Outdated
| } | ||
|
|
||
| // Remove px-unit from $rfs-breakpoint for calculations. | ||
| @if (unit($rfs-breakpoint) == 'px') { |
scss/mixins/_rfs.scss
Outdated
|
|
||
| // Remove px-unit from $rfs-minimum-font-size for calculations. | ||
| @if (unit($rfs-minimum-font-size) == 'px') { | ||
| $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1) |
There was a problem hiding this comment.
Declaration should be terminated by a semicolon
scss/mixins/_rfs.scss
Outdated
| $rfs-rem-value: 16 !default; | ||
|
|
||
| // Remove px-unit from $rfs-minimum-font-size for calculations. | ||
| @if (unit($rfs-minimum-font-size) == 'px') { |
|
Poly fluid sizing would be better. More fluent. |
|
@mabar, this implementation doesn't require to define mappings for every font-size so it can easily be used by users who do not have much frontend experience. |
kimamil
left a comment
kimamil
left a comment
There was a problem hiding this comment.
Can you add an example in the documentation on how to use this with rem? As I understood, rfs must be 'false' and unit set to 'rem'. Then I could use media-breakpoints on the html tag to set the font-size in 'rem'? But basically you suggest using fixed px sizes to set the base font-size in all breakpoints, correct?
Else, nice catch!
- Explain configuration - Remove link to github-repo from configuration - Remove old implementation of bootstrap
|
|
||
| ## Responsive font sizes | ||
| Bootstrap uses <a href="https://github.com/MartijnCuppens/rfs" target="_blank" rel="noopener">RFS</a> to control its font-size. RFS is an SCSS-mixin which automatically calculates the correct font size based on the browsers screen width. You just have got to define your font-size for big screens and the font size will automatically decrease for smaller screens. | ||
| Bootstrap uses <a href="https://github.com/MartijnCuppens/rfs" target="_blank" rel="noopener">RFS</a> to control its font size. RFS is an SCSS-mixin which automatically calculates the correct font size based on the browsers screen width. You just have got to define your font size for big screens and the font size will automatically decrease for smaller screens. |
There was a problem hiding this comment.
Please change this to a normal markdown link. Same for other ones too if any.
|
This PR contains generated css and had a lot of merge-conflicts since the release of Bootstrap beta, a clean PR is available here: #23734 |
6 participants
Implementation of responsive font-size system RFS.
Link to feature-request:
#23053
CC: @XhmikosR, @kimamil, @mdo