From b5e8402d925bcaa2c874db24dc23570ab03ed294 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Wed, 14 Feb 2018 12:30:42 +0100 Subject: [PATCH 1/3] Tell where to find the variables to override --- docs/4.0/getting-started/theming.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 48d1b058f75b..de41038f4386 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -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 `` when importing and compiling Bootstrap via npm: From bd94bec816ed3ea18f11325bb2218bdce78e97ed Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Wed, 14 Feb 2018 12:33:20 +0100 Subject: [PATCH 2/3] Be consistent with path to _variables.scss --- docs/4.0/getting-started/theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index de41038f4386..8f5a47a53f6d 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -228,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. | Variable | Values | Description | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | @@ -300,7 +300,7 @@ An expansive set of gray variables and a Sass map in `scss/_variables.scss` for -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: {% highlight scss %} $colors: ( From 72c028dc03c20bc29912582c2f24bf66ae2f7036 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Fri, 16 Feb 2018 08:57:06 +0100 Subject: [PATCH 3/3] Get rid of some 'our' in the doc Replaced by 'Boostrap's' when relevant --- docs/4.0/getting-started/theming.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 8f5a47a53f6d..0909db7305d6 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -228,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 `scss/_variables.scss` file. +You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file. | Variable | Values | Description | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | @@ -248,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.
{% for color in site.data.colors %} @@ -278,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.
{% for color in site.data.theme-colors %} @@ -300,7 +300,7 @@ An expansive set of gray variables and a Sass map in `scss/_variables.scss` for
-Within `scss/_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: (