diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 3553c249105cb91b6de6f04e519b62d0c42ea273..6ff66a0226815a96b3fd213b7345fabdad3e517e 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -25,11 +25,9 @@ main { // Body // // 1. Remove the margin in all browsers. -// 2. Set an explicit initial text-align value so that we can later use -// the `inherit` value on things like `<th>` elements. -// 3. As a best practice, apply a default `background-color`. -// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Change the default tap highlight to be completely transparent in iOS. +// 2. As a best practice, apply a default `background-color`. +// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 4. Change the default tap highlight to be completely transparent in iOS. body { margin: 0; // 1 font-family: $font-family-base; @@ -37,10 +35,10 @@ body { font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; - text-align: left; // 2 - background-color: $body-bg; // 3 - -webkit-text-size-adjust: 100%; // 4 - -webkit-tap-highlight-color: rgba($black, 0); // 5 + text-align: $body-text-align; + background-color: $body-bg; // 2 + -webkit-text-size-adjust: 100%; // 3 + -webkit-tap-highlight-color: rgba($black, 0); // 4 } // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b1191fe708fa3c3b695f619c0aa356676f5397b..146dd7316e1e130ee2b5ec3c6da47db12c8c1dd8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -148,6 +148,7 @@ $negative-spacers: negativify-map($spacers) !default; $body-bg: $white !default; $body-color: $gray-900 !default; +$body-text-align: null !default; // Links diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md index d76489d42475b5f1b9aece62a9cb2a9ab4f67bc4..fd7dcbd1eadb2d24648b6b875495ff3434287a0c 100644 --- a/site/content/docs/4.3/content/reboot.md +++ b/site/content/docs/4.3/content/reboot.md @@ -24,7 +24,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau - The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. -- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies. +- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies. - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. ## Native font stack