Optional responsive base font size change

[wfendler]

Not sure exactly how I'd structure this yet, so I don't have a pull request ready.. but in order to get the conversation started I just wanted to bring this up.

// global/_typography.scss

html {
  font: #{($base-font-size/16px)*1em}/#{$line-height-ratio} $font-body;
}

@include media-query(lap-and-up) { 
  html {
    font-size: #{($lg-base-font-size/16px)*1em};
  }
}

First, my initial thought is that this is a little too project-specific to include in spacebase. "Responsive" doesn't always mean that your type size is changing on your smallest breakpoint. I think it's a nice way to do things and would agree it's best-practice but I did previously have to remove this and adjust the rem mixin.

Can we make responsive typography a conditional? It would add the lap-and-up style and it would adjust the rem mixin to base it off the $lg-base-font-size variable, but by default base it off the $base-font-size variable?

The files this affects:

• _typography.scss
• _vars.scss
• _mixins.scss

@cstoobes in your experience have you always made a global font size change for "mobile"? Do you think this is something we should maybe just enforce on all responsive sites?

[cstoobes]

Yes, I've been thinking about this too. Pentair.com uses the same font size across all breakpoints, so the $lg-base-font-size is unnecessary. I agree this could be a conditional feature if needed.

[wfendler]

Do you think the best way to do this is just to wrap conditionals around those spots? Or is there a better way to separate this out? I'll see what I can come up with and send a pull request if I like it.. Everyone else take a look and see if you've got any ideas?

I think this one could be simple but it seems like the more we develop spacebase, the more conditionals we're adding and I just want to make sure each one is 100% necessary to avoid any unwanted bloat.

[audionerd]

What if... We remove this feature from spaceBase. But we describe how to re-implement it in documentation called "How to change type size based on media queries using spaceBase"?

That way, spaceBase core remains minimal. But we have example code and notes demonstrating how to extend it for this specific use case.

(One downside: if it's too complex an implementation, the doc will be difficult to keep up-to-date. Another downside: if it's an often-used feature, it'll be busy-work to keep bringing it back in every time)

[wfendler]

I've been going back and forth as I think about it.

• If it's a default, it's tedious to remove it. (It also causes unexpected problems, @athaeryn and I spent some time debugging some weird rem issues, which is what prompted this issue). There's also currently a $responsive flag.. if it's set to false, this responsive typography stuff is still happening.
• If it's not a default, it can be tedious to add it manually.
• If it's a conditional it could get messy in a few different files.

Do we all think this is the rule rather than the exception?

I think it needs to either be a separate conditional right after $responsive: true; or it needs to be added manually. I think I'm leaning slightly towards adding it manually.. but I'll see what I can come up with today for some conditionals. We can look at the code and see if it's worth it?

[cstoobes]

I'm leaning toward adding it manually and including how-to directions. To really use $lg-base-font-size correctly you have to use it everywhere you specify font-sizes, once for mobile and once again for the lap or desk breakpoint (see _typography.scss as an example).

[wfendler]

That is my preference, keeping this thing really lightweight. So if you're down.. let's leave it up to a vote for that? How about we start a wiki page with some general tricks/advice like this?

So I suppose we can put it up for a vote now? Removing base responsive font size adjustments. +1 here

[tjdunklee]

I'm partial to having it be something that needs to be added manually also. I think it would just overcomplicate things to have it be a conditional and may confuse people who are new to spaceBase.

+1 minimal spaceBase core

[athaeryn]

+1 keeping it simple

[cstoobes]

2914e5f989e757338a3a45ac44018bca6ad7cb4f Pulled it out from spaceBase. I think the methodology needs to be thought through (especially when it comes to using the rem mixin) before this can really be documented and recommended as a best practice.