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

4
votes

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

2
sasszurb-foundation

2 Answers

6
votes

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!

1
votes

If you need to change the $base-font-size while keeping the grid stuff as it is, you have to set $base-font-sizeand $rem-base to the same value. There is no need to change the lines in the standard foundation _settings.scss.

E.g.

// 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;