From 6f025183d5e93620f9504fdb7e7368b7034f6360 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 23 Sep 2015 18:32:10 -0700 Subject: Move v3 `.hidden` note into Migration docs --- docs/components/utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 456e44414..4ee1d46f3 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -234,7 +234,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes ## Hidden content -Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem. +Hide any HTML element with the `[hidden]` attribute. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem. Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. -- cgit v1.2.3 From c91e4f5162af55c2e616f429767d6e328855471b Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 23 Sep 2015 18:57:21 -0700 Subject: Clarify [hidden] attr docs; closes #17169 [ci skip] --- docs/components/utilities.md | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 4ee1d46f3..f3c68463a 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -232,16 +232,6 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} -## Hidden content - -Hide any HTML element with the `[hidden]` attribute. It's taken from [PureCSS](http://purecss.io). While `[hidden]` isn't natively supported by IE9-10, declaring it `display: none` in our CSS gets around that problem. - -Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. - -{% highlight html %} - -{% endhighlight %} - ## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document. @@ -329,3 +319,19 @@ Aspect ratios can be customized with modifier classes. {% endhighlight %} + +## HTML5 `[hidden]` attribute + +HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. + +{% highlight html %} + +{% endhighlight %} + +{% callout warning %} +#### jQuery incompatibility + +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +{% endcallout %} + +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](#invisible-content) instead. -- cgit v1.2.3 From 684300058e81ebee9388aeb301e458424f83c5d2 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 12 Oct 2015 11:18:11 -0700 Subject: Tweak .text-capitalize example to show what happens to interior capital letters; refs #17893 [ci skip] --- docs/components/utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index f3c68463a..42d5bd50f 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -108,7 +108,7 @@ Transform text in components with text capitalization classes. {% example html %}

Lowercased text.

Uppercased text.

-

Capitalized text.

+

CapiTaliZed text.

{% endexample %} ## Contextual colors and backgrounds -- cgit v1.2.3 From 9302fd4fd4a05a44de991416fea4b01443343595 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 16 Oct 2015 00:56:59 +0100 Subject: Remove redundant `.sr-only` text for Close buttons Since `aria-label` is used, it's not necessary anymore. --- docs/components/utilities.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 42d5bd50f..a593f8ce2 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -149,12 +149,11 @@ Ensure that any meaning conveyed through color is also conveyed in a format that ## Close icon -Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`. +Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`. {% example html %} {% endexample %} -- cgit v1.2.3 From 68189e226921d0cfaec4922b723d030baa11a25c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 16 Oct 2015 00:57:49 +0100 Subject: Add "keyboard users" to heading for `sr-only-focusable` --- docs/components/utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index a593f8ce2..727a55d04 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -251,7 +251,7 @@ The `.invisible` class can be used to toggle only the visibility of an element, } {% endhighlight %} -## Screen readers +## Screen readers and keyboard users Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. -- cgit v1.2.3 From c88d40dc5c7ed6a0f13ae49bc158d1f126a2be38 Mon Sep 17 00:00:00 2001 From: David Beitey Date: Tue, 27 Oct 2015 09:35:21 +1000 Subject: Minor wording tidy-up on Utilities doc page --- docs/components/utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 727a55d04..887cc32d4 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -4,7 +4,7 @@ title: Utility classes group: components --- -Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development. +Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development. ## Contents -- cgit v1.2.3 From be5e223177004c2072e8beedf00963adf9ced2db Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 12 Nov 2015 19:15:54 -0800 Subject: Move `[hidden]` style from _utilities.scss to _reboot.scss; fixes #18230 [skip sauce] --- docs/components/utilities.md | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 887cc32d4..788f1a3c8 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -318,19 +318,3 @@ Aspect ratios can be customized with modifier classes. {% endhighlight %} - -## HTML5 `[hidden]` attribute - -HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE9-10, the explicit declaration in our CSS gets around that problem. - -{% highlight html %} - -{% endhighlight %} - -{% callout warning %} -#### jQuery incompatibility - -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. -{% endcallout %} - -To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](#invisible-content) instead. -- cgit v1.2.3 From 2102ab4775a486c7284604fc4d9a43a20040c9d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Nov 2015 21:12:41 -0800 Subject: document links with text emphasis classes, fixes #18223 --- docs/components/utilities.md | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 788f1a3c8..3bc054774 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -124,6 +124,17 @@ Convey meaning through color with a handful of emphasis utility classes. These m

Donec ullamcorper nulla non metus auctor fringilla.

{% endexample %} +Contextual text classes also work well on anchors with the provided hover and focus states. + +{% example html %} +Muted link +Primary link +Success link +Info link +Warning link +Danger link +{% endexample %} + Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. {% example html %} -- cgit v1.2.3 From ade2ab13418b2c86aa47a767533e542dc6589aff Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 22 Nov 2015 20:53:34 -0800 Subject: Remove non-responsive text alignment classes These can be replaced by their `.text-xs-*` parallels. This also avoids any complications from interactions between the responsive and non-responsive classes. (e.g. `
`) Refs #18300 [skip sauce] --- docs/components/utilities.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 3bc054774..8ed199a75 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha Easily realign text to components with text alignment classes. {% example html %} -

Left aligned text.

-

Center aligned text.

-

Right aligned text.

Justified text.

No wrap text.

{% 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 transform Transform text in components with text capitalization classes. -- cgit v1.2.3 From c960169807102d1f78b700fbadac44106ff06716 Mon Sep 17 00:00:00 2001 From: Richard Kraaijenhagen Date: Mon, 23 Nov 2015 19:50:38 -0800 Subject: Add responsive embed class for 1:1 aspect ratio Closes #18141 --- docs/components/utilities.md | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 3bc054774..c2ac73bbc 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -328,4 +328,9 @@ Aspect ratios can be customized with modifier classes.
+ + +
+ +
{% endhighlight %} -- cgit v1.2.3 From a8dc4812a49d8467e8642abb510b523a9a51cd48 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 25 Nov 2015 02:32:41 -0800 Subject: Add responsive float classes; fixes #13690 --- docs/components/utilities.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index c2ac73bbc..728cd078d 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -168,25 +168,25 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur {% endexample %} -## Floats +## Responsive floats -Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins. +These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system. + +Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available. {% example html %} -
Float left
-
Float right
+
Float left on all viewport sizes
+
Float right on all viewport sizes
+
Don't float on all viewport sizes
+ +
Float left on viewports sized SM (small) or wider
+
Float left on viewports sized MD (medium) or wider
+
Float left on viewports sized LG (large) or wider
+
Float left on viewports sized XL (extra-large) or wider
{% endexample %} {% highlight scss %} -// Classes -.pull-left { - float: left !important; -} -.pull-right { - float: right !important; -} - -// Usage as mixins +// Related simple non-responsive mixins .element { @include pull-left; } -- cgit v1.2.3 From 26da610bd03e7efe9255b2b88f14449972f7d616 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 6 Dec 2015 16:39:55 -0800 Subject: fixes #18433: add three new font utils --- docs/components/utilities.md | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 693053a72..c73db767f 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -121,6 +121,16 @@ Transform text in components with text capitalization classes.

CapiTaliZed text.

{% endexample %} +## Font weight and style + +Quickly change the weight and style of text. + +{% example html %} +

Normal text.

+

Bold text.

+

Italicized text.

+{% endexample %} + ## Contextual colors and backgrounds Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles. -- cgit v1.2.3 From d1a0af8b24c09d5558cba0e65c34d1f1292e6085 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 6 Dec 2015 17:43:25 -0800 Subject: Tweak naming and docs of font utility classes * `.font-normal` is too generic. Rename it to `.font-weight-normal` for clarity. * Rename `.font-bold` to `.font-weight-bold` so as to parallel `.font-weight-normal`. * In docs, gloss "weight" term in relation to fonts for the benefit of non-typographiles. Refs #18433 [skip sauce] --- docs/components/utilities.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md index c73db767f..940219263 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -121,13 +121,13 @@ Transform text in components with text capitalization classes.

CapiTaliZed text.

{% endexample %} -## Font weight and style +## Font weight and italics -Quickly change the weight and style of text. +Quickly change the weight (boldness) of text or italicize text. {% example html %} -

Normal text.

-

Bold text.

+

Bold text.

+

Normal weight text.

Italicized text.

{% endexample %} -- cgit v1.2.3