RFS (Responsive font size) implementation

[MartijnCuppens]

Fixes #23053

• RFS is disabled by default and can be switched on with $enable-responsive-font-sizes
• font-size-properties are switched to the @include font-size()-mixin. Stylelint prevents the usage of font-size property.
• Basic documentation added + link to github repo for further documentation.
• RFS is enabled to rescale font-sizes of titles on the docs page.

Demo with RFS enabled available here (this is not the default behaviour, but would be the behaviour if $enable-responsive-font-sizes was true): https://project-rfs.github.io/

TODO:

• Remove fusv false warning workaround
• Decide whether or not we're going to keep $input-height-sm and $input-height-lg > no
• Test if we should increase the minimum font size to 1.25rem > yes

[MartijnCuppens]

@mdo: what do you think about this?

[mdo]

Thanks for keeping this up to date. I'm slating this for sure for 4.1, but I'll see if we should put it into 4.0 depending on a few other things.

[MartijnCuppens]

Update:
It's now possible to disable responsive font-sizes for page by adding the .disable-responsive-font-size class to the body or html. This class can also be added to other elements.

Minimum font-size is also increased to 1rem, which prevents the default text from scaling down.

[wolfy1339]

$enable-hover-media-query was not deprecated

[MartijnCuppens]

@wolfy1339: https://github.com/twbs/bootstrap/pull/25270/files#diff-d8ee409a461718bfb6240710c8c73382

[patrickhlauke]

This is all voodoo to me, but one request: make sure that even if using vh/vw etc, that there's a component for font sizing tied to something else like px/rem/em. Otherwise (when a font size is purely related to viewport dimensions and nothing else) you kill the user's ability to (full page) zoom on desktop and change the size the text is rendered at (as yes, the viewport dimensions change, but the font size would then change proportionally in the opposite direction, meaning the apparent font size is never actually altered).

[MartijnCuppens]

@patrickhlauke, It's possible to add the disable-responsive-font-size class to achieve this:
https://codepen.io/MartijnCuppens/pen/PEgNVM?editors=1100

Also, the font size is never purely related to viewport.

[MartijnCuppens]

There are several ways to implement this depending on what should be the default value for $rfs-class.

In the current implementation I've set $rfs-class: "disable";. This way, it's easy to disable responsive font sizes within the html by adding the .disable-responsive-font-size class. An example of this can be viewed here: https://codepen.io/MartijnCuppens/pen/PEgNVM?editors=1100 The class can also be added to the html or the body to disable responsive font sizes on the whole page. Downside of this implementation is that more css is generated (that's why I needed to increase the maxSize in package.json) and it increases specificity.

Another approach is to use $rfs-class: false;. This is the most performant solution but the .disable-responsive-font-size class cannot be added to elements. It can of course still be changed in scss, but I can imagine some people load the Bootstrap css via a CDN may prefer their font-size doesn't change. A possible solution for this is to generate 2 css versions: one with and one without responsive font-sizes.

[vladimirmartsul]

@MartijnCuppens, why not a $enable-rfs: false; (disabled by default) param like other in _variables.scss ?

[MartijnCuppens]

@vladimirmartsul, that might be a good idea. This wouldn't cause a lot of changes by default while developers can still easily enable responsive font sizes if they want to.

[MartijnCuppens]

I discovered changing the padding of buttons and inputs from em to rem can cause issues when upgrading Bootstrap, working on a solution for that.

I'll try to implement RFS in a way that it wouldn't have any influence on the current Bootstrap at all when it's disabled.

[MartijnCuppens]

I've now disabled the responsive font sizing by default so that the css files are exactly the same (apart from property order).

Responsive font sizing can be enabled with $enable-responsive-font-sizes.

[andresgalante]

Hi @MartijnCuppens, thanks for another great PR. I think that responsive font sizing is a killer feature to have.

My worried is that what this feature asks contributors might outweigh its value. Once we merge it we'll be asking contributors to include responsive-font-size every time they define a base font size. This adds a new level of complexity that makes Bootstrap harder to maintain and develop.

It'll be up to @mdo to decide if he wants this feature in Bootstrap or not. If we decide to add it I think we should either have a very strong linter or some kind of postCSS that automatically adds the artifact around the font size declarations.

[MartijnCuppens]

@andresgalante, at this moment there's also a border-radius and a transition mixin for other properties.

I've also added the font-size property to the declaration-property-value-blacklist which will trigger an error if the font-size property is instead of the mixin.

[planetoftheweb]

This is really slick. One of my pet peeves is that I always want fonts on my phone to be bigger, not smaller. I like the limits placed here on the sample site, they seem reasonable and I like that there's a variable for setting the minimum. Well done.

[MartijnCuppens]

Never thought I would merge this myself, thanks a lot Bootstrap community ❤️

[weilinzung]

Just updated to 4.3.0. All of the font sizes are messed up.

I use this custom mixins with the Bootstrap 4: https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/

I am confused because I add this mixins to as own which should not effect any updates from Bootstrap. All of updates below 4.3.0 are fine.

When I inspect it, it looks like outputting the SASS.
font-size: (null: 3rem, 1.2, lg: 2.6rem, md-max: 1.6rem, xs-md: 1.5rem);

[MartijnCuppens]

Hi @weilinzung,

Bootstrap now uses the font-size mixin from RFS. It looks like you're passing a sass map to the mixin while you should just pass a font size to it. It doesn't work the same as the article you're referring to.

[LeaTark]

Is there a compiled css on the cdn with rfs enabled?

[XhmikosR]

No, because there's no official build with the option enabled.

[weilinzung]

@MartijnCuppens Maybe change the custom mixins to not using font-size?

[weilinzung]

@MartijnCuppens Also, what is the official way to do responsive fonts then? Any new Dos?

[MartijnCuppens]

@weilinzung,
We're not going to change the name of the mixin since font-size is the most appropriate name.
You can find the documentation about the responsive font sizes in the Github repo: https://github.com/twbs/rfs

[weilinzung]

@MartijnCuppens What if the sizes are not what I want that from the automatic rescaling on smaller devices? This is a really good feature, but also what about line-height?
In typographic design, line-height should alway works with font size.

@mdo
I think the option to disable this new feature should be not overwriting the font-size property.
Currently, $enable-responsive-font-sizes: false is still overwriting the font-size property.
Overwriting the entire font-size property is limiting custom mixins.

[MartijnCuppens]

@weilinzung, we want to provide a solution that works out of the box without the need of further configuration. If you want you own implementation of the font sizes you can overwrite the mixin in your own custom configuration.

I'm going to lock the conversation on this PR because it we're deviating from the subject of it.