From 1ede3a299a60269ea11257a2d2fc9765f8ee1da6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2017 13:50:25 -0800 Subject: [PATCH 1/3] Remove -size-root so we can respect user prefs on browser default font-size --- scss/_popover.scss | 4 ++-- scss/_reboot.scss | 8 +++++--- scss/_variables.scss | 5 +---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/scss/_popover.scss b/scss/_popover.scss index 86b489a48bb3..730f7b5d3dee 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -134,8 +134,8 @@ font-size: $font-size-base; background-color: $popover-title-bg; border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); - $offset-border-width: ($border-width / $font-size-root); - @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0); + $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); + @include border-top-radius($offset-border-width); &:empty { display: none; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 3c0ffe13e9a7..557829f25ce0 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -55,8 +55,10 @@ html { // html { - // Sets a specific default `font-size` for user with `rem` type scales. - font-size: $font-size-root; + // We assume no initial pixel `font-size` for accessibility reasons. This + // allows web visitors to customize their browser default font-size, making + // your project more inclusive and accessible to everyone. + // As a side-effect of setting the @viewport above, // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, @@ -65,12 +67,12 @@ html { // See https://github.com/twbs/bootstrap/issues/18543 // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ -ms-overflow-style: scrollbar; + // Changes the default tap highlight to be completely transparent in iOS. -webkit-tap-highlight-color: rgba(0,0,0,0); } body { - // Make the `body` use the `font-size-root` font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; diff --git a/scss/_variables.scss b/scss/_variables.scss index 44e4d5737005..1448227a4152 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -249,10 +249,7 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -// Pixel value used to responsively scale all typography. Applied to the `` element. -$font-size-root: 16px !default; - -$font-size-base: 1rem !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; $font-size-xs: .75rem !default; From 216eb3df94eae644f36e5b4900e8b012ff46b53f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2017 13:50:49 -0800 Subject: [PATCH 2/3] leave a note in the docs --- docs/content/typography.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/typography.md b/docs/content/typography.md index 073734768135..674b19b2e33b 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -17,6 +17,7 @@ Bootstrap includes simple and easily customized typography for headings, body te Bootstrap sets basic global display, typography, and link styles. Specifically, we: - Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). From 06a6ac988bed109398fcfee87a3a57c8ca5ba23b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2017 13:51:06 -0800 Subject: [PATCH 3/3] clarify usage of base font-size so we know what's up --- scss/_close.scss | 2 +- scss/_dropdown.scss | 2 +- scss/_input-group.scss | 2 +- scss/_popover.scss | 2 +- scss/_variables.scss | 1 + 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/scss/_close.scss b/scss/_close.scss index 5a92430a47c7..859990e3105a 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,6 +1,6 @@ .close { float: right; - font-size: ($font-size-base * 1.5); + font-size: $close-font-size; font-weight: $close-font-weight; line-height: 1; color: $close-color; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 9638b81712de..22e78bf35a75 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -44,7 +44,7 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-margin-top 0 0; // override default ul - font-size: $font-size-base; + font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues color: $body-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 29831ab96db4..ab44883bd196 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -69,7 +69,7 @@ .input-group-addon { padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of