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

Jump to bottom

Clarifies Sass variable defaults, adds bootstrap-npm-starter callout #32795

Merged
merged 3 commits into from Jan 15, 2021
Merged

Clarifies Sass variable defaults, adds bootstrap-npm-starter callout #32795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5327ffc
Clarify Sass import and customize docs for how to modify variable def…
mdo Jan 14, 2021
3631bc0
Add an npm starter project callout to a few pages
mdo Jan 14, 2021
e87258d
Update callout-info-npm-starter.md
XhmikosR Jan 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 21 additions & 3 deletions site/content/docs/5.0/customize/sass.md
View file
Open in desktop
Expand Up @@ -42,6 +42,8 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Add custom code after this
```

```scss
Expand All @@ -53,6 +55,8 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Include custom variable default overrides here

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
Expand All @@ -70,21 +74,35 @@ Every Sass variable in Bootstrap includes the `!default` flag allowing you to ov

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.

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

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

```scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
```

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

{{< callout info >}}
{{< partial "callout-info-npm-starter.md" >}}
{{< /callout >}}

## Maps and loops

Bootstrap 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.
Expand Down Expand Up @@ -139,7 +157,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
// etc
```

## Required keys
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.0/getting-started/build-tools.md
View file
Open in desktop
Expand Up @@ -65,6 +65,10 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
</tbody>
</table>

{{< callout info >}}
{{< partial "callout-info-npm-starter.md" >}}
{{< /callout >}}

## Sass

Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated).
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.0/getting-started/download.md
View file
Open in desktop
Expand Up @@ -70,6 +70,10 @@ Bootstrap's `package.json` contains some additional metadata under the following
- `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

{{< callout info >}}
{{< partial "callout-info-npm-starter.md" >}}
{{< /callout >}}

### yarn

Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
Expand Down
1 change: 1 addition & 0 deletions site/layouts/partials/callout-info-npm-starter.md
View file
Open in desktop
@@ -0,0 +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.