From eaeee93fa34092ee7c107d75edffd6c8274c15fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Aug 2015 23:38:16 -0700 Subject: docs rearrange --- docs/content/typography.md | 256 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 docs/content/typography.md (limited to 'docs/content/typography.md') diff --git a/docs/content/typography.md b/docs/content/typography.md new file mode 100644 index 000000000..299edc570 --- /dev/null +++ b/docs/content/typography.md @@ -0,0 +1,256 @@ +--- +layout: page +title: Typography +group: content +--- + +Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/). + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Global settings + +Bootstrap sets basic global display, typography, and link styles. Specifically, we: + +- Set `background-color: #fff;` on the `` +- 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` + +These styles can be found within `scaffolding.less`. + + +## 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. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
+
+ +{% highlight html %} +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+{% endhighlight %} + +Create lighter, secondary text in any heading with a generic `` tag or the `.small` class. + +
+ + + + + + + + + + + + + + + + + + + + + +

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
+
+ +{% highlight html %} +

h1. Bootstrap heading Secondary text

+

h2. Bootstrap heading Secondary text

+

h3. Bootstrap heading Secondary text

+

h4. Bootstrap heading Secondary text

+
h5. Bootstrap heading Secondary text
+
h6. Bootstrap heading Secondary text
+{% endhighlight %} + +## Display headings + +Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. + +
+ + + + + + + + + + + + + + + +

Display 4

Display 3

Display 2

Display 1

+
+ + +## Lead + +Make a paragraph stand out by adding `.lead`. + +{% example html %} +

+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +

+{% endexample %} + +## Inline text elements + +Styling for common inline HTML5 elements. + +{% example html %} +

You can use the mark tag to highlight text.

+

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

+

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined

+

This line of text is meant to be treated as fine print.

+

This line rendered as bold text.

+

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. + +## 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. + +Add `.initialism` to an abbreviation for a slightly smaller font-size. + +{% example html %} +

attr

+

HTML

+{% endexample %} + +## Blockquotes + +For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. For straight quotes, we recommend a `

`. + +{% example html %} +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+{% endexample %} + +### Naming a source + +Add a `