0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +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:
Mark Otto 2018-01-14 20:07:57 -08:00 committed by GitHub
parent ed286e0f3d
commit eb6db8a3f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -42,6 +42,8 @@ your-project/
└── scss └── scss
{% endhighlight %} {% 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. 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 %} {% 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"; @import "node_modules/bootstrap/scss/grid";
{% endhighlight %} {% 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 ### 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. 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: To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
{% highlight scss %} {% highlight scss %}
@ -104,6 +108,8 @@ $theme-colors: (
); );
{% endhighlight %} {% endhighlight %}
#### Add to map
To add a new color to `$theme-colors`, add the new key and value: To add a new color to `$theme-colors`, add the new key and value:
{% highlight scss %} {% highlight scss %}
@ -112,12 +118,20 @@ $theme-colors: (
); );
{% endhighlight %} {% endhighlight %}
#### Remove from map
To remove colors from `$theme-colors`, or any other map, use `map-remove`: To remove colors from `$theme-colors`, or any other map, use `map-remove`:
{% highlight scss %} {% highlight scss %}
$theme-colors: map-remove($theme-colors, "success", "info", "danger"); $theme-colors: map-remove($theme-colors, "success", "info", "danger");
{% endhighlight %} {% 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 ### 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: 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: