From 1afaa89d2ef9b97dcce212ca298fc078e4107fce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2022 09:49:38 -0800 Subject: [PATCH 01/15] Add new link utilities, update colored link helpers --- scss/_helpers.scss | 1 + scss/_maps.scss | 9 ++ scss/_reboot.scss | 1 + scss/_utilities.scss | 50 ++++++++++ scss/helpers/_colored-links.scss | 7 +- scss/helpers/_icon-link.scss | 27 +++++ site/assets/scss/_content.scss | 38 +++---- site/content/docs/5.3/examples/_index.md | 59 ++++++----- .../content/docs/5.3/helpers/colored-links.md | 20 +++- site/content/docs/5.3/helpers/icon-link.md | 62 ++++++++++++ site/content/docs/5.3/utilities/link.md | 99 +++++++++++++++++++ site/data/examples.yml | 26 +++++ site/data/sidebar.yml | 2 + site/layouts/partials/icons.html | 3 + 14 files changed, 359 insertions(+), 45 deletions(-) create mode 100644 scss/helpers/_icon-link.scss create mode 100644 site/content/docs/5.3/helpers/icon-link.md create mode 100644 site/content/docs/5.3/utilities/link.md diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 6126781cde7e..13f2752c9bcc 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,6 +2,7 @@ @import "helpers/color-bg"; @import "helpers/colored-links"; @import "helpers/focus-ring"; +@import "helpers/icon-link"; @import "helpers/ratio"; @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_maps.scss b/scss/_maps.scss index 6418a3f6c000..25d5ea00dea0 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -116,6 +116,15 @@ $utilities-border-subtle: ( ) !default; // scss-docs-end utilities-border-colors +// $utilities-links: map-merge( +// $utilities-colors, +// ( +// "white": to-rgb($white) +// ) +// ) !default; +$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; + + $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; $gutters: $spacers !default; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 305740587b4d..a958fc931494 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -244,6 +244,7 @@ a { color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); text-decoration: $link-decoration; + &:hover { --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb); text-decoration: $link-hover-decoration; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 5134688e90bf..d017d117f121 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -609,6 +609,56 @@ $utilities: map-merge( values: $utilities-text-emphasis-colors ), // scss-docs-end utils-color + // scss-docs-start utils-links + "link-opacity": ( + css-var: true, + class: link-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "link-offset": ( + property: text-underline-offset, + class: link-offset, + state: hover, + values: ( + 1: .125em, + 2: .25em, + 3: .375em, + ) + ), + "link-underline": ( + // css-var: true, + property: text-decoration-color, + class: link-underline, + local-vars: ( + "link-underline-opacity": 1 + ), + values: map-merge( + $utilities-links-underline, + ( + null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), + ) + ) + ), + "link-underline-opacity": ( + css-var: true, + class: link-underline-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + ), + // scss-docs-end utils-links // scss-docs-start utils-bg-color "background-color": ( property: background-color, diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 0e03039bbf19..b9ea58ee121a 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,11 +1,14 @@ @each $color, $value in $theme-colors { .link-#{$color} { - color: $value if($enable-important-utilities, !important, null); + --#{$prefix}link-color-rgb: #{to-rgb($value)}; + text-decoration-color: rgba(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1)); @if $link-shade-percentage != 0 { &:hover, &:focus { - color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null); + $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); + --#{$prefix}link-color-rgb: #{to-rgb($hover-color)}; + text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)); } } } diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss new file mode 100644 index 000000000000..a1e18fa9781a --- /dev/null +++ b/scss/helpers/_icon-link.scss @@ -0,0 +1,27 @@ +.icon-link { + display: inline-flex; + gap: .375rem; + align-items: center; + text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); + text-underline-offset: .5rem; + backface-visibility: hidden; + + > .bi { + flex-shrink: 0; + width: 1em; + height: 1em; + @include transition(.2s ease-in-out transform); + } +} + +.icon-link-hover:hover { + > .bi { + transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0)); + } +} + +// --bs-transition-property +// --bs-transition-duration +// --bs-transition-timing +// --bs-transition-delay + diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 14b8b93fe1d4..f8cd6dcbc642 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -124,25 +124,25 @@ fill: currentcolor; } -.icon-link { - display: flex; - align-items: center; - text-decoration-color: rgba($primary, .5); - text-underline-offset: .5rem; - backface-visibility: hidden; - - .bi { - width: 1.5em; - height: 1.5em; - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list - } - - &:hover { - .bi { - transform: translate3d(5px, 0, 0); - } - } -} +// .icon-link { +// display: flex; +// align-items: center; +// text-decoration-color: rgba($primary, .5); +// text-underline-offset: .5rem; +// backface-visibility: hidden; + +// .bi { +// width: 1.5em; +// height: 1.5em; +// transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list +// } + +// &:hover { +// .bi { +// transform: translate3d(5px, 0, 0); +// } +// } +// } .border-lg-start { @include media-breakpoint-up(lg) { diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md index d46e38f255ca..fa3f6238284b 100644 --- a/site/content/docs/5.3/examples/_index.md +++ b/site/content/docs/5.3/examples/_index.md @@ -7,25 +7,40 @@ aliases: "/examples/" {{< list-examples.inline >}} {{ range $entry := $.Site.Data.examples -}} -
-
-

{{ $entry.category }}

-

{{ $entry.description }}

- {{ if eq $entry.category "RTL" -}} -
-

- RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? -

-

Please open an issue.

-
- {{ end -}} -
- -
- {{ range $i, $example := $entry.examples -}} - {{- $len := len $entry.examples -}} - {{ if (eq $i 0) }}
{{ end }} -
+
+

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

+ RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? +

+

Please open an issue.

+
+ {{ end -}} + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} + {{ if $entry.external }} +
+ +
+

+ + {{ $example.name }} + +

+

{{ $example.description }}

+

+ + + Edit in StackBlitz + +

+
+
+ {{ else }} +

{{ $example.description }}

- {{ if (eq (add $i 1) $len) }}
{{ end }} - {{ end -}} -
+ {{ end }} + {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}}
{{ end -}} {{< /list-examples.inline >}} diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md index e940196ff85a..d725e5386b13 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -3,15 +3,17 @@ layout: docs title: Colored links description: Colored links with hover states group: helpers -toc: false +toc: true --- +## Link colors + You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. {{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }} link +

{{ .name | title }} link

{{- end -}} {{< /colored-links.inline >}} {{< /example >}} @@ -19,3 +21,17 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class {{< callout info >}} Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. {{< /callout >}} + +## Link utilities + +{{< added-in "5.3.0" >}} + +Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}). + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

{{ .name | title }} link

+{{- end -}} +{{< /colored-links.inline >}} +{{< /example >}} diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md new file mode 100644 index 000000000000..e488f8107729 --- /dev/null +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -0,0 +1,62 @@ +--- +layout: docs +title: Icon link +description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons. +group: helpers +aliases: "/docs/5.3/icon-link/" +toc: true +added: 5.3 +--- + +The icon link helper component modifies our default link styles to enhance their apperance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to match their associated text's `font-size`. + +Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. + +## Example + +Take a regular `` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored. + +{{< example >}} + + + Icon link + +{{< /example >}} + +{{< example >}} + + Icon link + + +{{< /example >}} + +## Style on hover + +Add `.icon-link-hover` to move the icon to the right on hover. + +{{< example >}} + + Icon link + + +{{< /example >}} + +Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: + +{{< example >}} + + + Icon link + +{{< /example >}} + +## Pairs with link utilities + +{{< example >}} + + Icon link + + +{{< /example >}} + + diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md new file mode 100644 index 000000000000..24b6e153c29d --- /dev/null +++ b/site/content/docs/5.3/utilities/link.md @@ -0,0 +1,99 @@ +--- +layout: docs +title: Link +description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. +group: utilities +toc: true +added: 5.3 +--- + +## Link opacity + +Change the alpha opacity of the link `rgba()` color value with utilities. + +{{< example >}} +

Link opacity 10

+

Link opacity 25

+

Link opacity 50

+

Link opacity 75

+

Link opacity 100

+{{< /example >}} + +You can even change the opacity level on hover. + +{{< example >}} +

Link hover opacity 10

+

Link hover opacity 25

+

Link hover opacity 50

+

Link hover opacity 75

+

Link hover opacity 100

+{{< /example >}} + +## Link underlines + +### Underline color + +Change the underline's color independent of the link text color. + +{{< example >}} +{{< link-underline-colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

{{ .name | title }} underline

+{{- end -}} +{{< /link-underline-colors.inline >}} +{{< /example >}} + +### Underline offset + +Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. + +{{< example >}} +

Default link

+

Offset 1 link

+

Offset 2 link

+

Offset 3 link

+{{< /example >}} + +### Underline opacity + +Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity. + +{{< example >}} +

Underline opacity 10

+

Underline opacity 25

+

Underline opacity 50

+

Underline opacity 75

+

Underline opacity 100

+{{< /example >}} + +### Hover variants + +Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles. + +{{< example >}} + + Underline opacity 10 + +{{< /example >}} + +## Colored links + +[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset. + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

{{ .name | title }} link

+{{- end -}} +{{< /colored-links.inline >}} +{{< /example >}} + +## Sass + +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. + +### Utilities API + +Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-links" file="scss/_utilities.scss" >}} diff --git a/site/data/examples.yml b/site/data/examples.yml index 97d4bfb93f01..b8db98638ecf 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -1,3 +1,29 @@ +- category: Starters + external: true + description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz." + examples: + - name: CDN starter + description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN." + url: /examples/tree/main/starter + - name: Sass & JS + description: "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript." + url: /examples/tree/main/sass-js + - name: Sass & ESM JS + description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." + url: /examples/tree/main/sass-js-esm + - name: Webpack + description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." + url: /examples/tree/main/webpack + - name: Parcel + description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." + url: /examples/tree/main/parcel + - name: Vite + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." + url: /examples/tree/main/vite + - name: Bootstrap Icons + description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font." + url: /examples/tree/main/bootstrap-icons + - category: Snippets description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more." examples: diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index b1d567e9906e..dea26b401a9e 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -105,6 +105,7 @@ - title: Color & background - title: Colored links - title: Focus ring + - title: Icon link - title: Position - title: Ratio - title: Stacks @@ -125,6 +126,7 @@ - title: Flex - title: Float - title: Interactions + - title: Link - title: Object fit - title: Opacity - title: Overflow diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html index 9d078f9e71f9..ddf7f1d516d7 100644 --- a/site/layouts/partials/icons.html +++ b/site/layouts/partials/icons.html @@ -1,4 +1,7 @@ + + + From d081832caf4d9b89346a4623a38cdc3e5686b000 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 13:51:16 -0800 Subject: [PATCH 02/15] Remove commented out code --- scss/helpers/_icon-link.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index a1e18fa9781a..274e66654996 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -19,9 +19,3 @@ transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0)); } } - -// --bs-transition-property -// --bs-transition-duration -// --bs-transition-timing -// --bs-transition-delay - From 0337202226ceeb5097db550ad6ff69708a12b0f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 13:58:37 -0800 Subject: [PATCH 03/15] Fixes --- scss/_maps.scss | 7 ------- scss/_reboot.scss | 1 - site/assets/scss/_content.scss | 20 ------------------- site/content/docs/5.3/examples/_index.md | 6 +++--- .../docs/5.3/examples/features/features.css | 10 ---------- .../docs/5.3/examples/features/index.html | 12 +++++------ 6 files changed, 9 insertions(+), 47 deletions(-) diff --git a/scss/_maps.scss b/scss/_maps.scss index 25d5ea00dea0..9a5cc96b6ac0 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -116,15 +116,8 @@ $utilities-border-subtle: ( ) !default; // scss-docs-end utilities-border-colors -// $utilities-links: map-merge( -// $utilities-colors, -// ( -// "white": to-rgb($white) -// ) -// ) !default; $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default; - $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; $gutters: $spacers !default; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index a958fc931494..305740587b4d 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -244,7 +244,6 @@ a { color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); text-decoration: $link-decoration; - &:hover { --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb); text-decoration: $link-hover-decoration; diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f8cd6dcbc642..126ec9f88255 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -124,26 +124,6 @@ fill: currentcolor; } -// .icon-link { -// display: flex; -// align-items: center; -// text-decoration-color: rgba($primary, .5); -// text-underline-offset: .5rem; -// backface-visibility: hidden; - -// .bi { -// width: 1.5em; -// height: 1.5em; -// transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list -// } - -// &:hover { -// .bi { -// transform: translate3d(5px, 0, 0); -// } -// } -// } - .border-lg-start { @include media-breakpoint-up(lg) { border-left: var(--bs-border-width) solid var(--bs-border-color); diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md index fa3f6238284b..9c9cdd07e6a0 100644 --- a/site/content/docs/5.3/examples/_index.md +++ b/site/content/docs/5.3/examples/_index.md @@ -26,13 +26,13 @@ aliases: "/examples/"

- + {{ $example.name }}

{{ $example.description }}

- + Edit in StackBlitz @@ -41,7 +41,7 @@ aliases: "/examples/"

{{ else }}
- + .bi { - margin-top: .125rem; - margin-left: .125rem; - fill: currentcolor; - transition: transform .25s ease-in-out; -} -.icon-link:hover > .bi { - transform: translate(.25rem); -} - .icon-square { width: 3rem; height: 3rem; diff --git a/site/content/docs/5.3/examples/features/index.html b/site/content/docs/5.3/examples/features/index.html index 35a4ef5da0db..a60a98b33bf7 100644 --- a/site/content/docs/5.3/examples/features/index.html +++ b/site/content/docs/5.3/examples/features/index.html @@ -76,9 +76,9 @@

Columns with icons

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Call to action - +
@@ -87,9 +87,9 @@

Featured title

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Call to action - +
@@ -98,9 +98,9 @@

Featured title

Featured title

Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.

- + Call to action - + From 466921f6b3ade7846409e78791dc608c89a126d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:01:22 -0800 Subject: [PATCH 04/15] Remove examples changes --- site/content/docs/5.3/examples/_index.md | 61 +++++++++--------------- site/data/examples.yml | 26 ---------- 2 files changed, 23 insertions(+), 64 deletions(-) diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md index 9c9cdd07e6a0..d46e38f255ca 100644 --- a/site/content/docs/5.3/examples/_index.md +++ b/site/content/docs/5.3/examples/_index.md @@ -7,41 +7,26 @@ aliases: "/examples/" {{< list-examples.inline >}} {{ range $entry := $.Site.Data.examples -}} -
-

{{ $entry.category }}

-

{{ $entry.description }}

- {{ if eq $entry.category "RTL" -}} -
-

- RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? -

-

Please open an issue.

-
- {{ end -}} - {{ range $i, $example := $entry.examples -}} - {{- $len := len $entry.examples -}} - {{ if (eq $i 0) }}
{{ end }} - {{ if $entry.external }} -
- -
-

- - {{ $example.name }} - -

-

{{ $example.description }}

-

- - - Edit in StackBlitz - -

-
-
- {{ else }} -
- +
+
+

{{ $entry.category }}

+

{{ $entry.description }}

+ {{ if eq $entry.category "RTL" -}} +
+

+ RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? +

+

Please open an issue.

+
+ {{ end -}} +
+ +
+ {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}
{{ end }} +
+

{{ $example.description }}

- {{ end }} - {{ if (eq (add $i 1) $len) }}
{{ end }} - {{ end -}} + {{ if (eq (add $i 1) $len) }}
{{ end }} + {{ end -}} +
{{ end -}} {{< /list-examples.inline >}} diff --git a/site/data/examples.yml b/site/data/examples.yml index b8db98638ecf..97d4bfb93f01 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -1,29 +1,3 @@ -- category: Starters - external: true - description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz." - examples: - - name: CDN starter - description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN." - url: /examples/tree/main/starter - - name: Sass & JS - description: "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript." - url: /examples/tree/main/sass-js - - name: Sass & ESM JS - description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." - url: /examples/tree/main/sass-js-esm - - name: Webpack - description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." - url: /examples/tree/main/webpack - - name: Parcel - description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." - url: /examples/tree/main/parcel - - name: Vite - description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." - url: /examples/tree/main/vite - - name: Bootstrap Icons - description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font." - url: /examples/tree/main/bootstrap-icons - - category: Snippets description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more." examples: From 0463c58fb24b93f2214e6ff25e5cef998c10f4be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:04:15 -0800 Subject: [PATCH 05/15] Fixes and copy --- site/content/docs/5.3/helpers/icon-link.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index e488f8107729..8e36f13321cd 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -8,7 +8,7 @@ toc: true added: 5.3 --- -The icon link helper component modifies our default link styles to enhance their apperance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to match their associated text's `font-size`. +The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to match their associated text's `font-size`. Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. @@ -52,11 +52,11 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS ## Pairs with link utilities +Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. + {{< example >}} Icon link {{< /example >}} - - From 629e05812ab26cd151bcc1279b6e4b8ab0ecd5a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:09:19 -0800 Subject: [PATCH 06/15] Fix icon-link instances on homepage --- site/layouts/partials/home/components-utilities.html | 8 ++++---- site/layouts/partials/home/css-variables.html | 4 ++-- site/layouts/partials/home/customize.html | 4 ++-- site/layouts/partials/home/get-started.html | 4 ++-- site/layouts/partials/home/icons.html | 4 ++-- site/layouts/partials/home/plugins.html | 4 ++-- site/layouts/partials/home/themes.html | 4 ++-- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/site/layouts/partials/home/components-utilities.html b/site/layouts/partials/home/components-utilities.html index 6806a24b7b5e..e4c253d334fe 100644 --- a/site/layouts/partials/home/components-utilities.html +++ b/site/layouts/partials/home/components-utilities.html @@ -53,9 +53,9 @@

Quickly customize components

`) "html" "" }}

- + Explore customized components - +

@@ -78,9 +78,9 @@

Create and extend utilities

`) "scss" "" }}

- + Explore the utility API - +

diff --git a/site/layouts/partials/home/css-variables.html b/site/layouts/partials/home/css-variables.html index 3006947496e1..96a48287b7d0 100644 --- a/site/layouts/partials/home/css-variables.html +++ b/site/layouts/partials/home/css-variables.html @@ -8,9 +8,9 @@

Build and extend in real-time with Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.

- + Learn more about CSS variables - +

diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html index 365b524c442f..c38243dc257c 100644 --- a/site/layouts/partials/home/customize.html +++ b/site/layouts/partials/home/customize.html @@ -7,9 +7,9 @@

Customize everything with Sass Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.

- + Learn more about customizing - +

diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html index 2c3270450f79..58ddb99961ff 100644 --- a/site/layouts/partials/home/get-started.html +++ b/site/layouts/partials/home/get-started.html @@ -7,9 +7,9 @@

Get started any way you want

- + Read installation docs - +

diff --git a/site/layouts/partials/home/icons.html b/site/layouts/partials/home/icons.html index c6219b072e8e..5cc7f141739b 100644 --- a/site/layouts/partials/home/icons.html +++ b/site/layouts/partials/home/icons.html @@ -8,9 +8,9 @@

Personalize it with Bootstrap  Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.

- + Get Bootstrap Icons - +

diff --git a/site/layouts/partials/home/plugins.html b/site/layouts/partials/home/plugins.html index b76fe6539906..a2634b18c157 100644 --- a/site/layouts/partials/home/plugins.html +++ b/site/layouts/partials/home/plugins.html @@ -8,9 +8,9 @@

Powerful JavaScript plugins without Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your HTML. Need more control? Include individual plugins programmatically.

- + Learn more about Bootstrap JavaScript - +

diff --git a/site/layouts/partials/home/themes.html b/site/layouts/partials/home/themes.html index e832f2c6373b..3e286f267178 100644 --- a/site/layouts/partials/home/themes.html +++ b/site/layouts/partials/home/themes.html @@ -8,9 +8,9 @@

Make it yours with official Bootstr Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

- + Browse Bootstrap Themes - +

From 4d998ac60aef49f91087cde64e85401224595f9a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:10:11 -0800 Subject: [PATCH 07/15] Bump bundlewatch --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 94396f15c7fc..4cb4c772adbf 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -18,7 +18,7 @@ }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "10.75 kB" + "maxSize": "11.5 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", @@ -26,7 +26,7 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "31.5 kB" + "maxSize": "32.0 kB" }, { "path": "./dist/css/bootstrap.min.css", From 34e8bef5d04571ac6fd8eb1cbb03ce9125ef4303 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:15:53 -0800 Subject: [PATCH 08/15] Fix node-sass issue for rgba() function bug --- scss/helpers/_colored-links.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index b9ea58ee121a..06c8ce412041 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,14 +1,17 @@ +// stylelint-disable function-name-case + +// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { .link-#{$color} { --#{$prefix}link-color-rgb: #{to-rgb($value)}; - text-decoration-color: rgba(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1)); + text-decoration-color: RGBA(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1)); @if $link-shade-percentage != 0 { &:hover, &:focus { $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); --#{$prefix}link-color-rgb: #{to-rgb($hover-color)}; - text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)); + text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)); } } } From 49f78acb099a76244fc1a71f12383d3e4ff91e40 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:17:56 -0800 Subject: [PATCH 09/15] More bundlewatch --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 4cb4c772adbf..d6d7b84025c3 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "10.0 kB" + "maxSize": "10.5 kB" }, { "path": "./dist/css/bootstrap.css", @@ -30,7 +30,7 @@ }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "29.5 kB" + "maxSize": "30.0 kB" }, { "path": "./dist/js/bootstrap.bundle.js", From 930e012ad32be79ec5ee2247feddf984e9a1f696 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:21:18 -0800 Subject: [PATCH 10/15] One more time after merge --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index d6d7b84025c3..cc16c47b7848 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "10.5 kB" + "maxSize": "10.75 kB" }, { "path": "./dist/css/bootstrap.css", From 3c9c4401bc4b0060fd47ebb4a504813efc7de398 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2023 19:26:46 -0800 Subject: [PATCH 11/15] Add callout for a11y --- site/content/docs/5.3/helpers/icon-link.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index 8e36f13321cd..98d801ac51a4 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -8,17 +8,21 @@ toc: true added: 5.3 --- -The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to match their associated text's `font-size`. +The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`. Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. +{{< callout >}} +Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via `alt` or `aria-label` attribute. +{{< /callout >}} + ## Example Take a regular `` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored. {{< example >}} - + Icon link {{< /example >}} @@ -26,7 +30,7 @@ Take a regular `` element, add `.icon-link`, and insert an icon on either the {{< example >}} Icon link - + {{< /example >}} @@ -37,7 +41,7 @@ Add `.icon-link-hover` to move the icon to the right on hover. {{< example >}} Icon link - + {{< /example >}} @@ -45,7 +49,7 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS {{< example >}} - + Icon link {{< /example >}} @@ -57,6 +61,6 @@ Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/ {{< example >}} Icon link - + {{< /example >}} From 034ff787313380084b04d7d9eec77797c2b6190e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2023 19:30:14 -0800 Subject: [PATCH 12/15] Hover and focus-visible --- scss/helpers/_icon-link.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 274e66654996..712dd02c7297 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -14,8 +14,11 @@ } } -.icon-link-hover:hover { - > .bi { - transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0)); +.icon-link-hover { + &:hover, + &:focus-visible { + > .bi { + transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0)); + } } } From 250b3ef2c73be1d69a5a590c45ab6baf12e1a307 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2023 19:40:23 -0800 Subject: [PATCH 13/15] Add a11y callouts --- site/content/docs/5.3/helpers/colored-links.md | 4 ++-- site/content/docs/5.3/utilities/link.md | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md index d725e5386b13..9cdd0fad0f5d 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -8,7 +8,7 @@ toc: true ## Link colors -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. {{< example >}} {{< colored-links.inline >}} @@ -19,7 +19,7 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class {{< /example >}} {{< callout info >}} -Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## Link utilities diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index 24b6e153c29d..39e060a843cf 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -9,7 +9,7 @@ added: 5.3 ## Link opacity -Change the alpha opacity of the link `rgba()` color value with utilities. +Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can result in contrast ratios below the WCAG minimum. {{< example >}}

Link opacity 10

@@ -38,11 +38,15 @@ Change the underline's color independent of the link text color. {{< example >}} {{< link-underline-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -

{{ .name | title }} underline

+

{{ .name | title }} underline

{{- end -}} {{< /link-underline-colors.inline >}} {{< /example >}} +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ### Underline offset Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. @@ -88,6 +92,10 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under {{< /colored-links.inline >}} {{< /example >}} +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Sass In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. From e15878f56ed3c5f4f9de800cc822e2f821f6affc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2023 19:44:38 -0800 Subject: [PATCH 14/15] Remove duplicate for now --- site/content/docs/5.3/utilities/link.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index 39e060a843cf..e53e9a497de4 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -43,10 +43,6 @@ Change the underline's color independent of the link text color. {{< /link-underline-colors.inline >}} {{< /example >}} -{{< callout info >}} -{{< partial "callouts/warning-color-assistive-technologies.md" >}} -{{< /callout >}} - ### Underline offset Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. From 97f3d67475aadf09892e170fae55ad868fa6e37f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2023 19:49:30 -0800 Subject: [PATCH 15/15] More code review feedback --- site/content/docs/5.3/helpers/icon-link.md | 2 +- site/content/docs/5.3/utilities/link.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index 98d801ac51a4..66b2036bbfde 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -13,7 +13,7 @@ The icon link helper component modifies our default link styles to enhance their Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. {{< callout >}} -Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via `alt` or `aria-label` attribute. +Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via `alt` for `` elements `role="img"` and `aria-label` for SVGs. {{< /callout >}} ## Example diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index e53e9a497de4..3b98daa8698a 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -9,7 +9,7 @@ added: 5.3 ## Link opacity -Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can result in contrast ratios below the WCAG minimum. +Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}). {{< example >}}

Link opacity 10