Skip to content

Remove $base-font-size variable#272

Merged
whmii merged 1 commit intomasterfrom
whmii-modular-scale
Apr 18, 2017
Merged

Remove $base-font-size variable#272
whmii merged 1 commit intomasterfrom
whmii-modular-scale

Conversation

@whmii
Copy link
Contributor

@whmii whmii commented Dec 20, 2016

$base-font-size feels a bit legacy to me since we are already using modular-scale(), especially, the defined behavior is to output 1em (aka modular-scale-base).

no visual change.

Copy link
Contributor

@tysongach tysongach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 to removing $base-font-size. I always found it awkward and unneeded for a couple reasons:

  1. The base- nomenclature falls down in a larger system.
  2. html is the root document, so why not set a “base” font size there and all other relative units can calculate off of it. This removes the need for a variable.

@@ -1,7 +1,7 @@
body {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While we are changing core font sizing, I think it’d be great to swap body here for html. This would allow any usage of rem units down the road to pick up on any default font size changes.

color: $base-font-color;
font-family: $base-font-family;
font-size: $base-font-size;
font-size: modular-scale(0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have we thought about setting this as 100%? Percentage units here ensure that font sizing is scaled proportionally and evenly when a user adjusts the default text size within browser/OS settings, improving accessibility.

More info here: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

core/_forms.scss Outdated
display: block;
font-family: $base-font-family;
font-size: $base-font-size;
font-size: modular-scale(0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This goes against convention, but I’d suggest we set this to 16px, as it prevents a zooming bug on iOS. When set anything but 16px, iOS zooms the page when an input is focused.

More info: https://jonassebastianohlsson.com/blog/2013/11/25/how-to-stop-zoom-in-on-input-focus-on-mobile-devices/

@tysongach
Copy link
Contributor

@whmii Can we move this PR forward?

@tysongach
Copy link
Contributor

@whmii Ping!

@whmii whmii force-pushed the whmii-modular-scale branch from e0a94e4 to e845781 Compare April 17, 2017 20:38
@whmii
Copy link
Contributor Author

whmii commented Apr 17, 2017

@tysongach Updated based on comments

Copy link
Contributor

@tysongach tysongach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Mind updating the change log?

@whmii whmii force-pushed the whmii-modular-scale branch from e845781 to 27a46d2 Compare April 18, 2017 17:01
@whmii whmii merged commit 27a46d2 into master Apr 18, 2017
@tysongach tysongach deleted the whmii-modular-scale branch April 18, 2017 17:37

### Removed

- Removed `$base-font-size` in favor of more specific implimentations specific
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

implimentations → implementations


### Removed

- Removed `$base-font-size` in favor of more specific implimentations specific
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cut the second specific?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants