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/components/typography.md | 256 ------------------------------------------ 1 file changed, 256 deletions(-) delete mode 100644 docs/components/typography.md (limited to 'docs/components/typography.md') diff --git a/docs/components/typography.md b/docs/components/typography.md deleted file mode 100644 index faeb3f22d..000000000 --- a/docs/components/typography.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -layout: page -title: Typography -group: components ---- - -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 `