mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Theming docs update (#25300)
* heading for better linking * tell folks where to start * more headings * required keys section added, closes #25293
This commit is contained in:
parent
ed286e0f3d
commit
eb6db8a3f9
@ -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 %}
|
||||
@ -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
|
||||
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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:
|
||||
|
Loading…
Reference in New Issue
Block a user