How to set base font sizes in Bulma CSS for responsive design

Question

Going through the Bulma.io documentation, I cannot find how to set the base font-size for the responsive design.

As per this section on setting initial variables, we can set the initial value of classes $size-1 etc. However, I am wanting to set the very base font-size for the responsive-design. I.e. when the screen dimensions are, say, 980px, the base font-size should be 12px, instead of the standard 16px. Because the above mentioned font classes '$size-1', are rem, they would automatically resize as well.

So, my question is, is it possible to set the base font-size for the responsive design in Bulma? Or must I change the sizes of the classes $size-1 etc manually.

Thanks

Answer 1

It's the $body-size variable that you were looking for. Before importing Bulma, customize the variable's value:

// Custom config
$body-size: 14px !default;
// Standard Bulma
@import "bulma/bulma.sass";

Answer 2

Add this after importing Bulma SASS files.

html {
  font-size: 12px;
  @include tablet {
    font-size: 16px;
  }
  @include desktop {
    font-size: 20px;
  }
}

This overrides the $body-size variable, but it's only used to set html {font-size} so this should not cause any problems.