mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 07:39:57 +02:00
Code Issues Releases Wiki Activity

Helpers & utilities split (#28445)

Browse Source
This commit is contained in:
Martijn Cuppens
2019-05-23 11:56:03 +02:00
committed by GitHub
parent a4a04cd9ec
commit 769c8d8246
40 changed files with 957 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/content/docs/4.3/utilities/clearfix.md → site/content/docs/4.3/helpers/clearfix.md
View File

@@ -2,7 +2,8 @@
layout: docs
title: Clearfix
description: Quickly and easily clear floated content within a container by adding a clearfix utility.
group: utilities
group: helpers
aliases: "/docs/4.3/helpers/"
---
Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.

2
site/content/docs/4.3/utilities/embed.md → site/content/docs/4.3/helpers/embed.md
View File

@@ -2,7 +2,7 @@
layout: docs
title: Embeds
description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
group: utilities
group: helpers
toc: true
---

33
site/content/docs/4.3/helpers/position.md Normal file
View File

@@ -0,0 +1,33 @@
---
layout: docs
title: Position
description: Use these helpers for quickly configuring the position of an element.
group: helpers
toc: true
---
## Fixed top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
{{< highlight html >}}
<div class="fixed-top">...</div>
{{< /highlight >}}
## Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
{{< highlight html >}}
<div class="fixed-bottom">...</div>
{{< /highlight >}}
## Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
**IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly.
{{< highlight html >}}
<div class="sticky-top">...</div>
{{< /highlight >}}

2
site/content/docs/4.3/utilities/screen-readers.md → site/content/docs/4.3/helpers/screen-readers.md
View File

@@ -2,7 +2,7 @@
layout: docs
title: Screen readers
description: Use screen reader utilities to hide elements on all devices except screen readers.
group: utilities
group: helpers
---
Hide an element to all devices **except screen readers** with `.sr-only`. Use `.sr-only-focusable` to show the element only when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.

2
site/content/docs/4.3/utilities/stretched-link.md → site/content/docs/4.3/helpers/stretched-link.md
View File

@@ -2,7 +2,7 @@
layout: docs
title: Stretched link
description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS.
group: utilities
group: helpers
---
Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable.

25
site/content/docs/4.3/helpers/text.md Normal file
View File

@@ -0,0 +1,25 @@
---
layout: docs
title: Text
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
group: helpers
toc: true
---
## Text truncation
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
{{< example >}}
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
{{< /example >}}

261
site/content/docs/4.3/utilities/api.md Normal file
View File

@@ -0,0 +1,261 @@
---
layout: docs
title: Utility API
description: The utility API is a Sass based tool to generate utility classes.
group: utilities
aliases: "/docs/4.3/utilities/"
toc: true
---
The bootstrap utilities are generated with the utility API which can be used to change or extend Bootstraps utility classes. If you don't have any idea what sass maps are, you can consult the [official docs](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) to get started.
The `$utilities` map contains all utilities and is later merged with your custom `$utilities` map if present. The utility map contains a keyed list of utility groups which accept the following options:
- `property`: Name of the property, this can be a string or an array of strings (needed for eg. horizontal paddings or margins).
- `responsive` _(optional)_: Boolean indicating if responsive classes need to be generated. `false` by default.
- `class` _(optional)_: Variable to change the class name if you don't want it to be the same as the property.
- `values`: This can be a list of values or a map if you don't want the class name to be the same as the value. If null is used as map key, it isn't rendered.
- `print` _(optional)_: Boolean indicating if print classes need to be generated. `false` by default.
## Adding utilities to the utility API
All utility variables are added to the `$utilities` variable. Custom utility groups can added like this:
```scss
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
100: 1,
)
)
);
```
Output:
```css
.opacity-0 {
opacity: 0;
}
.opacity-25 {
opacity: .25;
}
.opacity-75 {
opacity: .75;
}
.opacity-100 {
opacity: 1;
}
```
## Changing the class prefix
With the `class` option, the class prefix can be changed:
```scss
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
100: 1,
)
)
);
```
Output:
```css
.o-0 {
opacity: 0;
}
.o-25 {
opacity: .25;
}
.o-75 {
opacity: .75;
}
.o-100 {
opacity: 1;
}
```
## Responsive utilities
With the `responsive` option, responsive utility classes can be generated:
```scss
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
100: 1,
)
)
);
```
Output:
```css
.opacity-0 {
opacity: 0;
}
.opacity-25 {
opacity: .25;
}
.opacity-75 {
opacity: .75;
}
.opacity-100 {
opacity: 1;
}
@media (min-width: 576px) {
.opacity-sm-0 {
opacity: 0;
}
.opacity-sm-25 {
opacity: .25;
}
.opacity-sm-75 {
opacity: .75;
}
.opacity-sm-100 {
opacity: 1;
}
}
@media (min-width: 768px) {
.opacity-md-0 {
opacity: 0;
}
.opacity-md-25 {
opacity: .25;
}
.opacity-md-75 {
opacity: .75;
}
.opacity-md-100 {
opacity: 1;
}
}
@media (min-width: 992px) {
.opacity-lg-0 {
opacity: 0;
}
.opacity-lg-25 {
opacity: .25;
}
.opacity-lg-75 {
opacity: .75;
}
.opacity-lg-100 {
opacity: 1;
}
}
@media (min-width: 1200px) {
.opacity-xl-0 {
opacity: 0;
}
.opacity-xl-25 {
opacity: .25;
}
.opacity-xl-75 {
opacity: .75;
}
.opacity-xl-100 {
opacity: 1;
}
}
```
## Changing utilities
Overriding excising utilities is possible by using the same key. For example if you want more responsive overflow
utility classes you can do this:
```scss
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
```
## Print utilities
Enabling the `print` option will **also** generate utility classes for print.
```scss
$utilities: (
"opacity": (
property: opacity,
class: o,
print: true,
values: (
0: 0,
25: .25,
50: .5,
100: 1,
)
)
);
```
Output:
```css
.o-0 {
opacity: 0;
}
.o-25 {
opacity: .25;
}
.o-75 {
opacity: .75;
}
.o-100 {
opacity: 1;
}
@media print {
.o-print-0 {
opacity: 0;
}
.o-print-25 {
opacity: .25;
}
.o-print-75 {
opacity: .75;
}
.o-print-100 {
opacity: 1;
}
}
```
## Removing utilities
Utilities can also be removed by changing the group key to `null`:
```scss
$utilities: (
"float": null,
);
```

1
site/content/docs/4.3/utilities/borders.md
View File

@@ -3,7 +3,6 @@ layout: docs
title: Borders
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
group: utilities
aliases: "/docs/4.3/utilities/"
toc: true
---

26
site/content/docs/4.3/utilities/position.md
View File

@@ -17,29 +17,3 @@ Quick positioning classes are available, though they are not responsive.
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
{{< /highlight >}}
## Fixed top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
{{< highlight html >}}
<div class="fixed-top">...</div>
{{< /highlight >}}
## Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
{{< highlight html >}}
<div class="fixed-bottom">...</div>
{{< /highlight >}}
## Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
**IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly.
{{< highlight html >}}
<div class="sticky-top">...</div>
{{< /highlight >}}

16
site/content/docs/4.3/utilities/text.md
View File

@@ -45,22 +45,6 @@ Prevent text from wrapping with a `.text-nowrap` class.
</div>
{{< /example >}}
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
{{< example >}}
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
{{< /example >}}
## Word break
Prevent long strings of text from breaking your components' layout by using `.text-break` to set `overflow-wrap: break-word` (and `word-break: break-word` for IE & Edge compatibility).