]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9bec37a)
Clarifies Sass variable defaults, adds bootstrap-npm-starter callout (#32795)
authorMark Otto <markd.otto@gmail.com>
Fri, 15 Jan 2021 00:21:21 +0000 (16:21 -0800)
committerGitHub <noreply@github.com>
Fri, 15 Jan 2021 00:21:21 +0000 (16:21 -0800)
* Clarify Sass import and customize docs for how to modify variable defaulst

* Add an npm starter project callout to a few pages

* Update callout-info-npm-starter.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
site/content/docs/5.0/customize/sass.md patch | blob | blame | history
site/content/docs/5.0/getting-started/build-tools.md patch | blob | blame | history
site/content/docs/5.0/getting-started/download.md patch | blob | blame | history
site/layouts/partials/callout-info-npm-starter.md [new file with mode: 0644] patch | blob

diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md
index d21dff7aa526ff67253fd23a1c7c6e0ecd64bd38..eda2d83fb8b7a7b56fbe75414101d3bd34131d64 100644 (file)
--- a/site/content/docs/5.0/customize/sass.md
+++ b/site/content/docs/5.0/customize/sass.md
@@ -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
@@ -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";
@@ -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.
@@ -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
diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/build-tools.md
index fcee8cc2606a116f76f8fcc891481ab722bf9266..d0286375eea2eb8a2d5380815727e194c817cbba 100644 (file)
--- a/site/content/docs/5.0/getting-started/build-tools.md
+++ b/site/content/docs/5.0/getting-started/build-tools.md
@@ -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).
diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md
index af2d5a5def90baf70e3f2a87158a715defa5ed78..48578572b0f1534318ce131b7189dd9ec991a453 100644 (file)
--- a/site/content/docs/5.0/getting-started/download.md
+++ b/site/content/docs/5.0/getting-started/download.md
@@ -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):
diff --git a/site/layouts/partials/callout-info-npm-starter.md b/site/layouts/partials/callout-info-npm-starter.md
new file mode 100644 (file)
index 0000000..bbd3897
--- /dev/null
+++ b/site/layouts/partials/callout-info-npm-starter.md
@@ -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.
Mirror of https://github.com/twbs/bootstrap.git