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

Be more explicit where to find variables #25624

Merged
merged 3 commits into from
Feb 19, 2018
Merged

Be more explicit where to find variables #25624

Changes from 2 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
6 changes: 4 additions & 2 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 our `scss/_variables.scss` file.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, just remove "our"


| Variable | Values | Description |
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -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 our color variables and Sass map. Here's an example of the `$colors` Sass map:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and here replace "our" with "Bootstrap's"


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