Zurb F5: changing the base font size and rem-base are confusing

Question

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

Not easy. It’s basically not possible to set the “default font size” to a value other than rem-basewithout breaking the grid. If $rem-base: 16pxand $base-font-size: 100%everything works fine - I just want large fonts. If $rem-base: 16pxand $base-font-size: 22pxcalculated grid, it must be set to 1815px instead of 1320px. Of course, since setting the html font size installs the rem module, all other font values ​​are related to rem.

Changing lines 345, 346 to _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; }

does not affect font size for p, ul, etc.

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

Greetings

Answer 1

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

So, what I did and the font size increases, but the grid remains the same (although you will need to move $ rem-base so that AFTER the size is $ base-font-size.)

So this comes 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;

, , , !

Answer 2

$base-font-size, , $base-font-size $rem-base . _settings.scss.

.

// This is the default html and body font-size for the base rem value.
$rem-base: 14px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import 'foundation/functions';

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// 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.
$base-font-size: $rem-base;