14

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

Kayote
  • 14,579
  • 25
  • 85
  • 144
  • 3
    The helper class is called `body-size` within 'Generic Variables' section. See this: https://bulma.io/documentation/customize/variables/#generic-variables & also this: https://github.com/jgthms/bulma/issues/1963 – Kayote Oct 02 '18 at 10:58

2 Answers2

5

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.

jiv-e
  • 483
  • 6
  • 8
3

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";
viam0Zah
  • 25,949
  • 8
  • 77
  • 100