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.

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

Theming docs update #25300

Merged
merged 4 commits into from
Jan 15, 2018
Merged
Changes from all commits
Commits
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
16 changes: 15 additions & 1 deletion docs/4.0/getting-started/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ your-project/
└── scss
{% endhighlight %}

### Importing

In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.

{% highlight scss %}
Expand All @@ -68,7 +70,7 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
@import "node_modules/bootstrap/scss/grid";
{% endhighlight %}

With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed.
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.

### Variable defaults

Expand All @@ -95,6 +97,8 @@ Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier

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.

#### Modify map

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

{% highlight scss %}
Expand All @@ -104,6 +108,8 @@ $theme-colors: (
);
{% endhighlight %}

#### Add to map

To add a new color to `$theme-colors`, add the new key and value:

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

#### Remove from map

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 %}

#### Required keys

Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.

For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values.

### 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