Zurb F5: changing base-font-size and rem-base is confusing

Question

I want my grid to have 24 columns within a row of 1320px. I also want to have my default (body) font size set to 22px. Let me show you how I can do this easily with SASS/SCSS and Zurb Foundation... Wait, what?

Not easy. It's basically not possible to set the 'default' font-size to a different value other than rem-base without breaking the grid. If $rem-base: 16px and $base-font-size: 100% everything works fine – I just want bigger fonts. If $rem-base: 16px and $base-font-size: 22px the grid is calculated to have 1815px instead of 1320px. Sure, because setting html font size sets the rem unit and everything other font-size refers to rem.

Changing lines 345, 346 at _global.scss (V 5.2.1) and setting them to different vars like this

html { font-size: $rem-base; }
body { font-size: $base-font-size; }

doesn't affect font sizes for p, ul, etc.

So the question persists: how do I get a 1320/24 grid with 22px base size using Foundation5 SCSS?

Cheers

Answer 1

According to the _settings.scss file 'If you want your base font-size to be different and not have it affect the grid breakpoints, set $rem-base to $base-font-size and make sure $base-font-size is a px value.'

So that's what I've done and the font size increases, but the grid stays the same (although you will need to move the $rem-base so it's AFTER the $base-font-size.)

So it goes from:

// This is the default html and body font-size for the base rem value.

 $rem-base: 16px;
 $base-font-size: 100%;

To:

// This is the default html and body font-size for the base rem value.

$base-font-size: 22px;
$rem-base: $base-font-size;

It's not something I've done before but hopefully it helps you!