From c2b80127640b4ef773d7ab9b8a2f083726872a9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2016 19:33:54 -0700 Subject: minor docs edit to fix #20538 --- 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 350345cff..0f0c176c5 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -209,7 +209,7 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur 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. +Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available. {% example html %}
Float left on all viewport sizes

-- cgit v1.2.3 From 076a950442371a8c0a974fa6478efb20a69527b7 Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 9 Sep 2016 06:48:17 +0200 Subject: Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) --- docs/components/utilities.md | 367 ------------------------------------------- 1 file changed, 367 deletions(-) delete mode 100644 docs/components/utilities.md (limited to 'docs/components/utilities.md') diff --git a/docs/components/utilities.md b/docs/components/utilities.md deleted file mode 100644 index 0f0c176c5..000000000 --- a/docs/components/utilities.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -layout: docs -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 while allowing for quick and easy development. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Spacing - -Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`. - -The classes are named using the format: `{property}-{sides}-{size}` - -Where *property* is one of: - -* `m` - for classes that set `margin` -* `p` - for classes that set `padding` - -Where *sides* is one of: - -* `t` - for classes that set `margin-top` or `padding-top` -* `b` - for classes that set `margin-bottom` or `padding-bottom` -* `l` - for classes that set `margin-left` or `padding-left` -* `r` - for classes that set `margin-right` or `padding-right` -* `x` - for classes that set both `*-left` and `*-right` -* `y` - for classes that set both `*-top` and `*-bottom` -* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element - -Where *size* is one of: - -* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0` -* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` -* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` - -(You can add more sizes by adding entries to the `$spacers` Sass map variable.) - -Here are some representative examples of these classes: - -{% highlight scss %} -.m-t-0 { - margin-top: 0 !important; -} - -.m-l-1 { - margin-left: $spacer-x !important; -} - -.p-x-2 { - padding-left: ($spacer-x * 1.5) !important; - padding-right: ($spacer-x * 1.5) !important; -} - -.p-a-3 { - padding: ($spacer-y * 3) ($spacer-x * 3) !important; -} -{% endhighlight %} - -### Horizontal centering -Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`. - -
-
- Centered element -
-
- -{% highlight html %} -
- Centered element -
-{% endhighlight %} - -## Text alignment - -Easily realign text to components with text alignment classes. - -{% example html %} -

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. - -{% 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 %} - -## 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. - -{% example html %} -

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

-

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-

Etiam porta sem malesuada magna mollis euismod.

-

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 %} -
Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
Maecenas sed diam eget risus varius blandit sit amet non magna.
-
Etiam porta sem malesuada magna mollis euismod.
-
Donec ullamcorper nulla non metus auctor fringilla.
-
Cras mattis consectetur purus sit amet fermentum.
-{% endexample %} - -{% callout info %} -#### Dealing with specificity - -Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. -{% endcallout %} - -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - -## Widths - -Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`. - -{% example html %} -Width = 100% -{% endexample %} - -## CSS `display` (`block`, `inline`, `inline-block`) - -Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively). - -To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead. - -{% example html %} -
Inline
-
Inline
- -Block - -
-

inline-block

- Boot that strap! -
-
-

inline-block

- Strap that boot! -
-{% endexample %} - -## Close icon - -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 %} - -## Responsive floats - -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 Sass mixins (`pull-left` and `pull-right`) are also available. - -{% example html %} -
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 %} -// Related simple non-responsive mixins -.element { - @include pull-left; -} -.another-element { - @include pull-right; -} -{% endhighlight %} - -## Clearfix - -Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. - -{% highlight html %} -
...
-{% endhighlight %} - -{% highlight scss %} -// Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} - -// Usage as a mixin -.element { - @include clearfix; -} -{% endhighlight %} - -## Fixed positioning - -The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: - -{% highlight scss %} -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} -{% 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. - -{% highlight html %} - -{% endhighlight %} - -{% highlight scss %} -// Class -.invisible { - visibility: hidden; -} - -// Usage as a mixin -.element { - @include invisible; -} -{% endhighlight %} - -## 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. - -{% comment %} -Necessary for following [accessibility best practices](../getting-started/#accessibility). -{% endcomment %} - -{% highlight html %} -Skip to main content -{% endhighlight %} - -{% highlight scss %} -// Usage as a mixin -.skip-navigation { - @include sr-only; - @include sr-only-focusable; -} -{% endhighlight %} - -## Image replacement - -Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. - -{% highlight html %} -

Custom heading

-{% endhighlight %} - -{% highlight scss %} -// Usage as a mixin -.heading { - @include text-hide; -} -{% endhighlight %} - -## Responsive embeds - -Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. - -Rules are directly applied to ` -
-{% endexample %} - -Aspect ratios can be customized with modifier classes. - -{% highlight html %} - -
- -
- - -
- -
- - -
- -
- - -
- -
-{% endhighlight %} -- cgit v1.2.3