Skip to content

Commit

Permalink
Big copy edits and testing
Browse files Browse the repository at this point in the history
Moves the remote utilities section to the using the api section and updates the code snippet to work. Previous one removed all utilities.
  • Loading branch information
mdo authored and XhmikosR committed Nov 5, 2020
1 parent 5e270a1 commit 0766a09
Showing 1 changed file with 25 additions and 15 deletions.
40 changes: 25 additions & 15 deletions site/content/docs/5.0/utilities/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -203,38 +203,33 @@ Output:
}
```

### Remove utilities

Utilities can also be removed by changing the group key to `null`:
## Using the API

```scss
$utilities: (
"float": null,
);
```
Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.

## Adding to existing utilities
### Add utilities

Add new utilities with `map-merge`.Start by importing the utilities stylesheet, then use `map-merge` to add new properties and values.s
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.

```scss
@import "bootstrap/scss/utilities";

$utilities: map-merge(
$utilities,
(
"font-size": (
"cursor": (
property: cursor,
class: cursor
responsive: true,
property: font-weight,
values: $display-font-sizes,
values: auto pointer grab,
)
)
);
```

## Modifying existing utilities
### Modify utilities

Modify existing utilities with `map-get` and `map-merge`. Once again, be sure to import the utilities stylesheet before your custom utilities.
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/utilities";
Expand All @@ -254,3 +249,18 @@ $utilities: map-merge(
)
);
```

### 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/utilities";

$utilities: map-merge(
$utilities,
(
"width": null
)
);
```

0 comments on commit 0766a09

Please sign in to comment.