Skip to content

Commit d674c33

Browse files
mdomdo
authored
Backport #32795 (#32809)
* Clarify Sass import and customize docs for how to modify variable defaults * Add an npm starter project callout to a few pages
1 parent 80aefd8 commit d674c33

File tree

4 files changed

+30
-3
lines changed

4 files changed

+30
-3
lines changed

‎site/content/docs/4.5/getting-started/build-tools.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
3030

3131
Run `npm run` to see all the npm scripts.
3232

33+
{{< callout info >}}
34+
{{< partial "callout-info-npm-starter.md" >}}
35+
{{< /callout >}}
36+
3337
## Autoprefixer
3438

3539
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.

‎site/content/docs/4.5/getting-started/download.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ Bootstrap's `package.json` contains some additional metadata under the following
7070
- `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
7171
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
7272

73+
{{< callout info >}}
74+
{{< partial "callout-info-npm-starter.md" >}}
75+
{{< /callout >}}
76+
7377
### yarn
7478

7579
Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):

‎site/content/docs/4.5/getting-started/theming.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
5050
// Option A: Include all of Bootstrap
5151

5252
@import "../node_modules/bootstrap/scss/bootstrap";
53+
54+
// Add custom code after this
5355
```
5456

5557
```scss
@@ -61,6 +63,8 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
6163
@import "../node_modules/bootstrap/scss/variables";
6264
@import "../node_modules/bootstrap/scss/mixins";
6365

66+
// Include custom variable default overrides here
67+
6468
// Optional
6569
@import "../node_modules/bootstrap/scss/reboot";
6670
@import "../node_modules/bootstrap/scss/type";
@@ -73,25 +77,39 @@ With that setup in place, you can begin to modify any of the Sass variables and
7377

7478
### Variable defaults
7579

76-
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.
80+
Every Sass variable in Bootstrap 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.
7781

7882
You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
7983

80-
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.
84+
Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.
8185

8286
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
8387

8488
```scss
89+
// Required
90+
@import "../node_modules/bootstrap/scss/functions";
91+
@import "../node_modules/bootstrap/scss/variables";
92+
@import "../node_modules/bootstrap/scss/mixins";
93+
8594
// Your variable overrides
8695
$body-bg: #000;
8796
$body-color: #111;
8897

8998
// Bootstrap and its default variables
90-
@import "../node_modules/bootstrap/scss/bootstrap";
99+
100+
// Optional
101+
@import "../node_modules/bootstrap/scss/root";
102+
@import "../node_modules/bootstrap/scss/reboot";
103+
@import "../node_modules/bootstrap/scss/type";
104+
// etc
91105
```
92106

93107
Repeat as necessary for any variable in Bootstrap, including the global options below.
94108

109+
{{< callout info >}}
110+
{{< partial "callout-info-npm-starter.md" >}}
111+
{{< /callout >}}
112+
95113
### Maps and loops
96114

97115
Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.

‎site/layouts/partials/callout-info-npm-starter.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**Get started with Bootstrap via npm with our starter project!** Head to the [twbs/bootstrap-npm-starter](https://github.com/twbs/bootstrap-npm-starter) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.

0 commit comments

Comments
 (0)