diff options
| author | Mark Otto <[email protected]> | 2016-02-06 20:33:26 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 20:33:26 -0800 |
| commit | d7d0e186bdfb52856a455c438538582fe95324e6 (patch) | |
| tree | 43484b5b58471431662e0a8be2b3bb9eb7f00d31 /docs/content | |
| parent | f6ad665c26f8a376a806721feaf3f38ceadc7e79 (diff) | |
| parent | cb7b78087690e756e33b6f6abdb3548f73f8bb1b (diff) | |
| download | bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.tar.xz bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.zip | |
Merge branch 'v4-dev' into v4-split-buttons
Diffstat (limited to 'docs/content')
| -rw-r--r-- | docs/content/reboot.md | 24 | ||||
| -rw-r--r-- | docs/content/typography.md | 20 |
2 files changed, 37 insertions, 7 deletions
diff --git a/docs/content/reboot.md b/docs/content/reboot.md index d55230e59..2c65e6e21 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -32,6 +32,30 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau - The `<body>` also sets a global `font-family` and `line-height`. 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 + +The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). + +{% highlight sass %} +$font-family-sans-serif: + // Safari for OS X and iOS (San Francisco) + -apple-system, + // Chrome for OS X (San Francisco) and Windows (Segoe UI) + BlinkMacSystemFont, + // Windows + "Segoe UI", + // Android + "Roboto", + // Linux distros + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + // Older Android + "Droid Sans", + // Basic web fallback + "Helvetica Neue", Arial, sans-serif !default; +{% endhighlight %} + +This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. + ## Headings and paragraphs All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. diff --git a/docs/content/typography.md b/docs/content/typography.md index 30b9ca0de..0c6d53aa2 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -15,13 +15,13 @@ Bootstrap includes simple and easily customized typography for headings, body te Bootstrap sets basic global display, typography, and link styles. Specifically, we: -- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default) -- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base -- Set the global link color via `$link-color` and apply link underlines only on `:hover` +- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- 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). These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. - ## Headings All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. @@ -132,8 +132,14 @@ Styling for common inline HTML5 elements. <p><em>This line rendered as italicized text.</em></p> {% endexample %} +`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring. + While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc. +## Text utilities + +Change text alignment, transform, style, weight, and color with our [text utilities](http://localhost:9001/components/utilities/#text-alignment). + ## Abbreviations Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies. @@ -226,7 +232,7 @@ Align terms and descriptions horizontally by using our grid system's predefined <dt class="col-sm-3">Euismod</dt> <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> - <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd> + <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd> <dt class="col-sm-3">Malesuada porta</dt> <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> @@ -237,8 +243,8 @@ Align terms and descriptions horizontally by using our grid system's predefined <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> - <dt class="col-sm-3">Nested definition list</dt> - <dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> + <dt class="col-sm-4">Nested definition list</dt> + <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd> </dl> |