From 07e42d264ef5533507d22558cbe2003f0ab007c0 Mon Sep 17 00:00:00 2001 From: voltaek Date: Wed, 13 Jan 2021 21:26:47 -0500 Subject: [PATCH 1/5] Backport of changes to v5 docs that updated and clarified information about the Sass compiler used and the minimum rounding precision we recommend with it. --- site/content/docs/4.5/getting-started/build-tools.md | 6 ++++++ site/content/docs/4.5/getting-started/download.md | 6 +++--- site/content/docs/4.5/getting-started/theming.md | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/site/content/docs/4.5/getting-started/build-tools.md b/site/content/docs/4.5/getting-started/build-tools.md index 12293a2361e4..b408a12fb82f 100644 --- a/site/content/docs/4.5/getting-started/build-tools.md +++ b/site/content/docs/4.5/getting-started/build-tools.md @@ -34,6 +34,12 @@ Run `npm run` to see all the npm scripts. {{< partial "callout-info-npm-starter.md" >}} {{< /callout >}} +## Sass + +Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note, because as of October 26, 2020, LibSass and packages built on top of it — including Node Sass — are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). If you require newer Sass features or additional compatibility, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [NPM](https://www.npmjs.com/package/sass#user-content-api) pages). + +We increase the Sass rounding precision to 6 (by default it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. + ## Autoprefixer 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. diff --git a/site/content/docs/4.5/getting-started/download.md b/site/content/docs/4.5/getting-started/download.md index 0a43f826695c..b52bdc5af8b7 100644 --- a/site/content/docs/4.5/getting-started/download.md +++ b/site/content/docs/4.5/getting-started/download.md @@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling: -- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS. +- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing -Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. +Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. }}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source @@ -53,7 +53,7 @@ If you're using our compiled JavaScript and prefer to include Popper separately, ## Package managers -Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. +Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. ### npm diff --git a/site/content/docs/4.5/getting-started/theming.md b/site/content/docs/4.5/getting-started/theming.md index 1f895db82eaf..8c48444dae69 100644 --- a/site/content/docs/4.5/getting-started/theming.md +++ b/site/content/docs/4.5/getting-started/theming.md @@ -14,7 +14,7 @@ Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There ## Sass -Utilize our source Sass files to take advantage of variables, maps, mixins, and more. In our build we've increased the Sass rounding precision to 6 (by default it's 5) to prevent issues with browser rounding. +Utilize our source Sass files to take advantage of variables, maps, mixins, and more when [compiling Sass]({{< docsref "/getting-started/build-tools#sass" >}}) using your own asset pipeline. ### File structure From c26aa4dcbc7ec85314bf8497f1abc752d14ddfc8 Mon Sep 17 00:00:00 2001 From: voltaek Date: Wed, 13 Jan 2021 21:39:03 -0500 Subject: [PATCH 2/5] "compatibility" clarification --- site/content/docs/4.5/getting-started/build-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/4.5/getting-started/build-tools.md b/site/content/docs/4.5/getting-started/build-tools.md index b408a12fb82f..16c4e0c7299e 100644 --- a/site/content/docs/4.5/getting-started/build-tools.md +++ b/site/content/docs/4.5/getting-started/build-tools.md @@ -36,7 +36,7 @@ Run `npm run` to see all the npm scripts. ## Sass -Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note, because as of October 26, 2020, LibSass and packages built on top of it — including Node Sass — are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). If you require newer Sass features or additional compatibility, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [NPM](https://www.npmjs.com/package/sass#user-content-api) pages). +Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note, because as of October 26, 2020, LibSass and packages built on top of it — including Node Sass — are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [NPM](https://www.npmjs.com/package/sass#user-content-api) pages). We increase the Sass rounding precision to 6 (by default it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. From 9aaf2c4aba9e65dd00e246d0266518f385d8c4f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 13 Jan 2021 19:16:24 -0800 Subject: [PATCH 3/5] Update build-tools.md --- site/content/docs/4.5/getting-started/build-tools.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/content/docs/4.5/getting-started/build-tools.md b/site/content/docs/4.5/getting-started/build-tools.md index 16c4e0c7299e..e78e02cb8317 100644 --- a/site/content/docs/4.5/getting-started/build-tools.md +++ b/site/content/docs/4.5/getting-started/build-tools.md @@ -36,9 +36,11 @@ Run `npm run` to see all the npm scripts. ## Sass -Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note, because as of October 26, 2020, LibSass and packages built on top of it — including Node Sass — are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [NPM](https://www.npmjs.com/package/sass#user-content-api) pages). +Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note because as of October 26, 2020, LibSass and packages built on top of it—including Node Sass—are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). -We increase the Sass rounding precision to 6 (by default it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. +If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [npm](https://www.npmjs.com/package/sass#user-content-api) pages). + +We increase the Sass rounding precision to 6 (by default, it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. ## Autoprefixer From 1d88821f99bbfcfe5fff9b15fc59885b3d3c0d03 Mon Sep 17 00:00:00 2001 From: voltaek Date: Thu, 14 Jan 2021 08:26:11 -0500 Subject: [PATCH 4/5] Remove anchors from Dart Sass links, clearer wording --- site/content/docs/4.5/getting-started/build-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/4.5/getting-started/build-tools.md b/site/content/docs/4.5/getting-started/build-tools.md index e78e02cb8317..67e3fd705630 100644 --- a/site/content/docs/4.5/getting-started/build-tools.md +++ b/site/content/docs/4.5/getting-started/build-tools.md @@ -38,7 +38,7 @@ Run `npm run` to see all the npm scripts. Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note because as of October 26, 2020, LibSass and packages built on top of it—including Node Sass—are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). -If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on both the project's [GitHub](https://github.com/sass/dart-sass#javascript-api) or [npm](https://www.npmjs.com/package/sass#user-content-api) pages). +If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on Dart Sass's [GitHub](https://github.com/sass/dart-sass) and [npm](https://www.npmjs.com/package/sass) pages). We increase the Sass rounding precision to 6 (by default, it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted. From 42310bc54cd3ac4125d3ea91db44582020eb9657 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 14 Jan 2021 15:29:42 +0200 Subject: [PATCH 5/5] Update build-tools.md --- site/content/docs/4.5/getting-started/build-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/4.5/getting-started/build-tools.md b/site/content/docs/4.5/getting-started/build-tools.md index 67e3fd705630..83c26c361cf6 100644 --- a/site/content/docs/4.5/getting-started/build-tools.md +++ b/site/content/docs/4.5/getting-started/build-tools.md @@ -38,7 +38,7 @@ Run `npm run` to see all the npm scripts. Bootstrap v4 uses [Node Sass](https://github.com/sass/node-sass) for compiling our Sass source files into CSS files (included in our build process). In order to end up with the same generated CSS when compiling Sass using your own asset pipeline, you'll need to use a Sass compiler that supports at least the features that Node Sass does. This is important to note because as of October 26, 2020, LibSass and packages built on top of it—including Node Sass—are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). -If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on Dart Sass's [GitHub](https://github.com/sass/dart-sass) and [npm](https://www.npmjs.com/package/sass) pages). +If you require newer Sass features or compatibility with newer CSS standards, [Dart Sass](https://sass-lang.com/dart-sass) is now the primary implementation of Sass and supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed on Dart Sass's [GitHub page](https://github.com/sass/dart-sass)). We increase the Sass rounding precision to 6 (by default, it's 5 in Node Sass) to prevent issues with browser rounding. If you use Dart Sass this won't be something you need to adjust, as that compiler uses a rounding precision of 10 and for efficiency reasons does not allow it to be adjusted.