diff options
Diffstat (limited to 'site/content/docs/5.0/utilities/api.md')
| -rw-r--r-- | site/content/docs/5.0/utilities/api.md | 31 |
1 files changed, 28 insertions, 3 deletions
diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index 70e4c3aad..6610f9ee0 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -83,7 +83,7 @@ Output: .o-100 { opacity: 1; } ``` -## States +### States Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS. @@ -244,9 +244,11 @@ Now that you're familiar with how the utilities API works, learn how to add your ### Add utilities -New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our `_utilities.scss` is imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. +New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -254,7 +256,7 @@ $utilities: map-merge( ( "cursor": ( property: cursor, - class: cursor + class: cursor, responsive: true, values: auto pointer grab, ) @@ -267,6 +269,8 @@ $utilities: map-merge( Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -285,11 +289,32 @@ $utilities: map-merge( ); ``` +#### Rename utilities + +Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`: + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/utilities"; + +$utilities: map-merge( + $utilities, ( + "margin-start": map-merge( + map-get($utilities, "margin-start"), + ( class: ml ), + ), + ) +); +``` + ### Remove utilities Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( |