From 58816b38b7063db46172ffa12178c95fdb242f6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 19:34:24 -0700 Subject: Move /utilities/typography to /utilities/text to match SCSS file name --- docs/4.0/components/card.md | 2 +- docs/4.0/content/figures.md | 2 +- docs/4.0/content/images.md | 2 +- docs/4.0/content/typography.md | 4 +-- docs/4.0/migration.md | 2 +- docs/4.0/utilities/text.md | 75 ++++++++++++++++++++++++++++++++++++++++ docs/4.0/utilities/typography.md | 75 ---------------------------------------- 7 files changed, 81 insertions(+), 81 deletions(-) create mode 100644 docs/4.0/utilities/text.md delete mode 100644 docs/4.0/utilities/typography.md (limited to 'docs') diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index 28483fc13..d0d633d05 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -242,7 +242,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width. ## Text alignment -You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment). +You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). {% example html %}
diff --git a/docs/4.0/content/figures.md b/docs/4.0/content/figures.md index e7c181cab..31e89edfe 100644 --- a/docs/4.0/content/figures.md +++ b/docs/4.0/content/figures.md @@ -16,7 +16,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov {% endexample %} -Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment). +Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). {% example html %}
diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index 2198889c7..7906dab36 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
A generic square placeholder image with rounded corners diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md index 2f69ea9c6..74ecbe614 100644 --- a/docs/4.0/content/typography.md +++ b/docs/4.0/content/typography.md @@ -8,7 +8,7 @@ toc: true ## Global settings -Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/). +Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/). - Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. - For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. @@ -168,7 +168,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant ## Text utilities -Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#text-alignment). +Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). ## Abbreviations diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index 1748fd924..0f2819edd 100644 --- a/docs/4.0/migration.md +++ b/docs/4.0/migration.md @@ -198,7 +198,7 @@ Dropped entirely for the new card component. - `.panel-default` removed and no replacement. - `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different. - `.panel-heading` to `.card-header` -- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `

`, `.h3`) or bold elements or classes (e.g. ``, ``, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`. +- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `

`, `.h3`) or bold elements or classes (e.g. ``, ``, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`. - `.panel-body` to `.card-body` - `.panel-footer` to `.card-footer` - `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map. diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md new file mode 100644 index 000000000..32e11335d --- /dev/null +++ b/docs/4.0/utilities/text.md @@ -0,0 +1,75 @@ +--- +layout: docs +title: Typography +description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. +group: utilities +toc: true +--- + +## Text alignment + +Easily realign text to components with text alignment classes. + +{% example html %} +

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

+{% endexample %} + +For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. + +{% example html %} +

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

+ +

Left aligned text on viewports sized SM (small) or wider.

+

Left aligned text on viewports sized MD (medium) or wider.

+

Left aligned text on viewports sized LG (large) or wider.

+

Left aligned text on viewports sized XL (extra-large) or wider.

+{% endexample %} + +## Text wrapping and overflow + +Prevent text from wrapping with a `.text-nowrap` class. + +{% example html %} +
+
+ Curabitur blandit tempus ardua ridiculus sed magna. +
+
+ An image to show the text doesn't wrap +
+
+{% endexample %} + +For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. + +{% example html %} +
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+{% endexample %} + +## Text transform + +Transform text in components with text capitalization classes. + +{% example html %} +

Lowercased text.

+

Uppercased text.

+

CapiTaliZed text.

+{% endexample %} + +Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected. + +## Font weight and italics + +Quickly change the weight (boldness) of text or italicize text. + +{% example html %} +

Bold text.

+

Normal weight text.

+

Italic text.

+{% endexample %} diff --git a/docs/4.0/utilities/typography.md b/docs/4.0/utilities/typography.md deleted file mode 100644 index 32e11335d..000000000 --- a/docs/4.0/utilities/typography.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -layout: docs -title: Typography -description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. -group: utilities -toc: true ---- - -## Text alignment - -Easily realign text to components with text alignment classes. - -{% example html %} -

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

-{% endexample %} - -For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. - -{% example html %} -

Left aligned text on all viewport sizes.

-

Center aligned text on all viewport sizes.

-

Right aligned text on all viewport sizes.

- -

Left aligned text on viewports sized SM (small) or wider.

-

Left aligned text on viewports sized MD (medium) or wider.

-

Left aligned text on viewports sized LG (large) or wider.

-

Left aligned text on viewports sized XL (extra-large) or wider.

-{% endexample %} - -## Text wrapping and overflow - -Prevent text from wrapping with a `.text-nowrap` class. - -{% example html %} -
-
- Curabitur blandit tempus ardua ridiculus sed magna. -
-
- An image to show the text doesn't wrap -
-
-{% endexample %} - -For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. - -{% example html %} -
-
- Praeterea iter est quasdam res quas ex communi. -
-
-{% endexample %} - -## Text transform - -Transform text in components with text capitalization classes. - -{% example html %} -

Lowercased text.

-

Uppercased text.

-

CapiTaliZed text.

-{% endexample %} - -Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected. - -## Font weight and italics - -Quickly change the weight (boldness) of text or italicize text. - -{% example html %} -

Bold text.

-

Normal weight text.

-

Italic text.

-{% endexample %} -- cgit v1.2.3