Enabling Responsive Font Size

Hi,

I would like to enable Responsive font size in order to have smaller headings on smaller screens.

I configured the 'Design Settings' with the path to bstudio-saas: /bstudio-sass-macos/bstudio-sass

And I created an scss file with the following: $enable-responsive-font-sizes: true;

But this does not seem to trigger font size changes, I tried setting media queries as well, without success, so I must be making some configuration error, or some syntax error or both... if someone has a properly working configuration and syntax, that would be very helpful.

Thanks!

Quite interesting: https://getbootstrap.com/docs/4.3/content/typography/#responsive-font-sizes

I've done something similar using vw, calc and rem too. I also uploaded a component with fluid typography IIRC but I didn't know it's now directly supported by bootstrap.

thanks for that info, let's see how can we use it in BSS

This is interesting. I do change some font sizes depending on the size of the screen, but only headings. Body text needs to be readable even on small screens.

@Printninja to keep text readable I usually add (r)em and vw with calc. See https://misty-union-0678.bss.design/ (or get the .bsdesign from https://send.firefox.com/download/f2f53426ba8dbf18/#0Gsh_WuejfEQs_uIKnByzw )

@julienp,

I believe it's not working is because BSS uses a pre-compiled version of the Bootstrap CSS that's provided by a CDN. So your project is only using SASS in the files you create not the files that the app uses for the base files. Since it is turned off by default, there isn't away to turn it on and I'm not sure if there is a CDN of it turned on either.

Saj 26,169 user downloads

@Sai there's no such (official) version. See https://github.com/twbs/bootstrap/issues/28281

but you can find here a workaround, including a CDN-hosted version with a tiny css file with the relevant changes.

I thought that this was something that was easily done with browser width and minmax().

I didn't know that it had to be enabled.

Thank you for making my life a little easier.

Note to self:
  I am still thinking about using font scaling using curve fitting analysis.

Good find @marrco. There's the temp solution until v5 comes out then.

Saj

So, in the current version (5.4.3) it all scales well using vw and min, and max.

In the Font Size parameter of the paragraph I was looking to scale I put the following:

min(max(30px, 8vw), 70px)

If you unpick the ordering and brackets, that sets the text to a size of 8vw (view width units) with a minimum of 30px and a maximum of 70px.

I’ve updated this (old) post as when I was Googling around trying to figure out how to do it this came near the top of the list!

How do you do that, I looked in Ide and didn’t find it.

This is old, just putting it here in case if anyone still requires it, normally I do is create a new SCSS file and add following to it

$min_fs: 6;
$max_fs: 128;

@for $fs from $min_fs through $max_fs {
    .font-size-#{$fs} {
      font-size: #{$fs}px;
    }
}

$breakpoints: (
  xs: 300px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);


@each $name, $val in $breakpoints {
    @media (min-width: #{$val}) {
        @for $fs from $min_fs through $max_fs {
            .font-size-#{$name}-#{$fs} {
              font-size: #{$fs}px;
            }
        }
    }
}

then uses classes such as following

font-size-12 font-size-md-20 font-size-xl-32

Are you aware of this?

1 Like

did not know that, thanks @printninja