Skip to content

Be more explicit where to find variables #25624

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

Merged
mdo merged 3 commits into from
Feb 19, 2018
Merged

Be more explicit where to find variables #25624

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5e8402
Tell where to find the variables to override
pgiraud Feb 14, 2018
bd94bec
Be consistent with path to _variables.scss
pgiraud Feb 14, 2018
72c028d
Get rid of some 'our' in the doc
pgiraud Feb 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions docs/4.0/getting-started/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ With that setup in place, you can begin to modify any of the Sass variables and

Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.

You will find the complete list of Bootstrap's variables in `scss/_variables.scss`.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files.

Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
Expand Down Expand Up @@ -226,7 +228,7 @@ You can also specify a base color with our color map functions:

Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.

You can find and customize these variables for key global options in our `_variables.scss` file.
You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.

| Variable | Values | Description |
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
Expand All @@ -246,7 +248,7 @@ Many of Bootstrap's various components and utilities are built through a series

### All colors

All colors available in Bootstrap 4, are available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
All colors available in Bootstrap 4, are available as Sass variables and a Sass map in `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.

<div class="row">
{% for color in site.data.colors %}
Expand Down Expand Up @@ -276,7 +278,7 @@ In the future, we'll aim to provide Sass maps and variables for shades of each c

### Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file.
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstraps's `scss/_variables.scss` file.

<div class="row">
{% for color in site.data.theme-colors %}
Expand All @@ -298,7 +300,7 @@ An expansive set of gray variables and a Sass map in `scss/_variables.scss` for
</div>
</div>

Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map:
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:

{% highlight scss %}
$colors: (
Expand Down