Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Theming docs for removing map items #25108

Merged
merged 3 commits into from
Dec 30, 2017
Merged

Update Theming docs for removing map items #25108

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a9e0b5
Update Theming docs for removing map items
mdo Dec 28, 2017
0099a6b
Update theming.md
XhmikosR Dec 30, 2017
9a18b1f
Merge branch 'v4-dev' into remove-from-maps-docs
XhmikosR Dec 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion docs/4.0/getting-started/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ Repeat as necessary for any variable in Bootstrap, including the global options

Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.

For example, to modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.

To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:

{% highlight scss %}
$theme-colors: (
Expand All @@ -110,6 +112,12 @@ $theme-colors: (
);
{% endhighlight %}

To remove colors from `$theme-colors`, or any other map, use `map-remove`:

{% highlight scss %}
$theme-colors: map-remove($theme-colors, "success", "info", "danger");
{% endhighlight %}

### Functions

Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps:
Expand Down