Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4: Remove root font-size #21524

Merged
merged 3 commits into from
Jan 4, 2017
Merged

v4: Remove root font-size #21524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ede3a2
Remove -size-root so we can respect user prefs on browser default fon…
mdo Jan 3, 2017
216eb3d
leave a note in the docs
mdo Jan 3, 2017
06a6ac9
clarify usage of base font-size so we know what's up
mdo Jan 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/content/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<body>`.
- 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 `<body>` (`#fff` by default).
Expand Down
2 changes: 1 addition & 1 deletion scss/_close.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion scss/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
.input-group-addon {
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base;
font-size: $font-size-base; // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-color;
Expand Down
6 changes: 3 additions & 3 deletions scss/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@
// Offset the popover to account for the popover arrow
.popover-title {
padding: $popover-title-padding-y $popover-title-padding-x;
margin: 0; // reset heading margin
margin-bottom: 0; // Reset the default from Reboot
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;
Expand Down
8 changes: 5 additions & 3 deletions scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>` 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;
Expand Down Expand Up @@ -942,6 +939,7 @@ $carousel-transition: transform .6s ease-in-out !default;

// Close

$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
Expand Down