From 087e864637ef6e19be328b8215e86f03f1228c43 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 15:17:41 +0200 Subject: [PATCH 1/3] Making the customization option docs cleared about variable overrides with !default flag --- docs/4.0/getting-started/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 2547ef1adce6..c9b1d7d9fce5 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -8,7 +8,7 @@ toc: true ## Customizing variables -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the ``, you'd do the following: From beb3d062cf82dfc4a426f1c877a5c20467ce3372 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 16:57:36 +0200 Subject: [PATCH 2/3] Added examples to the existing docs change for more clarity --- docs/4.0/getting-started/options.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index c9b1d7d9fce5..a830d81af80c 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -8,13 +8,15 @@ toc: true ## Customizing variables -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. - -For example, to change out the `background-color` and `color` for the ``, you'd do the following: +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the 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. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the ``, you'd do the following:: {% highlight scss %} -$body-bg: $gray-900; -$body-color: $gray-600; +// Your variable overwrite first or a Sass file containing the modifications +$body-bg: #000000; +$body-color: #ffffff; + +// Then import Bootstrap +@import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} Do the same for any variable you need to override, including the global options listed below. From b820211c5f827882f39925289937d9cebae973e0 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 19:44:13 +0200 Subject: [PATCH 3/3] Changed hex values to follow bootstrap coding guidelines --- docs/4.0/getting-started/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index a830d81af80c..3b9629f7fb7b 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -12,8 +12,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can {% highlight scss %} // Your variable overwrite first or a Sass file containing the modifications -$body-bg: #000000; -$body-color: #ffffff; +$body-bg: #000; +$body-color: #111; // Then import Bootstrap @import "node_modules/bootstrap/scss/bootstrap";