search

twbs / rfs

✩ Automates responsive resizing ✩
MIT License
3.32k stars 216 forks source link

Is RFS installed and enabled as part of Bootstrap 5? #374

Closed David263 closed 3 years ago

David263 commented 3 years ago

I can't tell from the terse Bootstrap 5 documentation how to make the font-size change automatically. I have a layout that uses the same large size (which I specify in 'rem' units) even for very narrow widths.

MartijnCuppens commented 3 years ago

Yes, see https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes

Best demo to view is the display headings: https://getbootstrap.com/docs/5.0/content/typography/#display-headings

David263 commented 3 years ago

Yes, that page does show the fonts getting smaller as the page narrows. Very nice, although perhaps not always wanted. So, what I want to know is how to turn this feature off and on. Is there a Bootstrap 5 class for this? Or is it turned off and on for certain features like the Responsive Grid or Fluid Layout? Is it always on? Or is it turned off for a certain set of classes? The documentation doesn't answer such questions.

MartijnCuppens commented 3 years ago

So, what I want to know is how to turn this feature off and on.

There's a Sass option $enable-rfs to enable/disable RFS: https://getbootstrap.com/docs/5.0/customize/options/

Or is it turned off and on for certain features like the Responsive Grid or Fluid Layout?

RFS is a unit resize tool, nothing to do with the grid.

Is it always on?

It's turned on for all font sizes, can be turned on in the utility API for whatever property you need.

David263 commented 3 years ago

I don't wish to use SASS. I change colors, for example, by using custom CSS. I believe that all website stuff belongs in the served files, so it is easy to change or bug-fix.

What does SASS do to its generated CSS when you disable RFS? Probably I could do the same thing in CSS, no?

By "utility API" do you mean a Bootstrap 5 class in the HTML, or something different? So I could make an image change size according to the viewport width by adding a class to it? Or is API something related to JS? Can you be more specific, or do you mean that the RFS source code would have to be changed?

MartijnCuppens commented 3 years ago

I don't wish to use SASS.

Well, Sass is used to customize the CSS, so it's quite essential to use.

Probably I could do the same thing in CSS, no?

No. There are if/else tests in Sass which don't exist in CSS.

By "utility API" do you mean a Bootstrap 5 class in the HTML, or something different?

By "utility API", I mean "utility API", like what you can read in the docs I referred to earlier: https://getbootstrap.com/docs/5.0/utilities/api/

Or is API something related to JS?

No, it's Sass based, see "The utility API is a Sass-based tool to generate utility classes." here: https://getbootstrap.com/docs/5.0/utilities/api/

Can you be more specific, or do you mean that the RFS source code would have to be changed?

No, you just got to configure what you want in Sass.