From a5f4046d38231163c63be8e68c6551b906f272e9 Mon Sep 17 00:00:00 2001 From: David Beitey Date: Thu, 21 Jan 2016 10:28:05 +1000 Subject: Document .small and .mark classes These are available in _type.scss but not documented. These classes are useful for styling without adding semantics. --- docs/content/typography.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index 30b9ca0de..ddda8333d 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -134,6 +134,8 @@ Styling for common inline HTML5 elements. While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. +Corresponding classes `.small` and `.mark` are also available and apply the respective styles without introducing additional semantics. + ## Abbreviations Stylized implementation of HTML's `` 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. -- cgit v1.2.3 From fc7ee66630e050c73701706291520c7db8034c70 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 20 Jan 2016 17:50:08 -0800 Subject: Docs: Tweak #18982 [skip sauce] --- docs/content/typography.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index ddda8333d..82f80a8a8 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -132,9 +132,9 @@ Styling for common inline HTML5 elements.

This line rendered as italicized text.

{% endexample %} -While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. +`.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring. -Corresponding classes `.small` and `.mark` are also available and apply the respective styles without introducing additional semantics. +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. ## Abbreviations -- cgit v1.2.3 From d8e82e2e8fd1ac421177107f4619db8f676813e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 13:32:53 -0800 Subject: document --- docs/content/reboot.md | 24 ++++++++++++++++++++++++ docs/content/typography.md | 7 ++++--- 2 files changed, 28 insertions(+), 3 deletions(-) (limited to 'docs/content') 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 `` and `` elements are updated to provide better page-wide defau - The `` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. - For safety, the `` 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 `` 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., `

`—and `

` 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 82f80a8a8..045620584 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -15,9 +15,10 @@ 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 `` (`#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 ``. +- 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). These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. -- cgit v1.2.3 From fc6c593bec04535f8db66f03fed11d9f3ef6015a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 15:50:19 -0800 Subject: rogue line break --- docs/content/typography.md | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index 045620584..a415b0526 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -22,7 +22,6 @@ Bootstrap sets basic global display, typography, and link styles. Specifically, These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. - ## Headings All HTML headings, `

` through `

`, 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. -- cgit v1.2.3 From 27ba4beb228a4a5ad47ef40ff2c688b25cf9a8d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 15:53:10 -0800 Subject: cross ref the type utils in the type docs --- docs/content/typography.md | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index a415b0526..2c0207375 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -136,6 +136,10 @@ Styling for common inline HTML5 elements. While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` 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 `` 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. -- cgit v1.2.3 From ccf971d860a164e6c110bda012a7577d807ad7af Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 20:01:37 -0800 Subject: Fixes #17969: Clear horizontal dls - Using the grid classes, they still need clearfixes since rows aren't injected between them all - Update docs to fix broken classes --- docs/content/typography.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/content') diff --git a/docs/content/typography.md b/docs/content/typography.md index 2c0207375..0c6d53aa2 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -232,7 +232,7 @@ Align terms and descriptions horizontally by using our grid system's predefined
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
-
Donec id elit non mi porta gravida at eget metus.
+
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
@@ -243,8 +243,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
Nesting
-
Nested definition list
-
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+
Nested definition list
+
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
-- cgit v1.2.3