V4 dev updates and backports

.github/workflows/browserstack.yml

@@ -5,7 +5,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   browserstack:

.github/workflows/bundlewatch.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   bundlewatch:

.github/workflows/css.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   css:

.github/workflows/dart-sass.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   css:

.github/workflows/docs.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   docs:

.github/workflows/lint.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   lint:

build/zip-examples.js

@@ -15,34 +15,62 @@ const sh = require('shelljs')
 const pkg = require('../package.json')
 
 const versionShort = pkg.config.version_short
-const folderName = `bootstrap-${pkg.version}-examples`
+const distFolder = `bootstrap-${pkg.version}-examples`
+const rootDocsDir = '_gh_pages'
+const docsDir = `${rootDocsDir}/docs/${versionShort}/`
+
+// these are the files we need in the examples
+const cssFiles = [
+  'bootstrap.min.css',
+  'bootstrap.min.css.map'
+]
+const jsFiles = [
+  'bootstrap.bundle.min.js',
+  'bootstrap.bundle.min.js.map'
+]
+const imgFiles = [
+  'bootstrap-outline.svg',
+  'bootstrap-solid.svg'
+]
 
 sh.config.fatal = true
 
-if (!sh.test('-d', '_gh_pages')) {
-  throw new Error('The "_gh_pages" folder does not exist, did you forget building the docs?')
+if (!sh.test('-d', rootDocsDir)) {
+  throw new Error(`The "${rootDocsDir}" folder does not exist, did you forget building the docs?`)
 }
 
 // switch to the root dir
 sh.cd(path.join(__dirname, '..'))
 
-// remove any previously created folder with the same name
-sh.rm('-rf', folderName)
+// remove any previously created folder/zip with the same name
+sh.rm('-rf', [distFolder, `${distFolder}.zip`])
+
 // create any folders so that `cp` works
-sh.mkdir('-p', folderName)
-sh.mkdir('-p', `${folderName}/assets/brand/`)
-
-sh.cp('-Rf', `_gh_pages/docs/${versionShort}/examples/*`, folderName)
-sh.cp('-Rf', `_gh_pages/docs/${versionShort}/dist/`, `${folderName}/assets/`)
-// also copy the two brand images we use in the examples
-sh.cp('-f', [
-  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-outline.svg`,
-  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-solid.svg`
-], `${folderName}/assets/brand/`)
-sh.rm(`${folderName}/index.html`)
+sh.mkdir('-p', [
+  distFolder,
+  `${distFolder}/assets/brand/`,
+  `${distFolder}/assets/dist/css/`,
+  `${distFolder}/assets/dist/js/`
+])
+
+sh.cp('-Rf', `${docsDir}/examples/*`, distFolder)
+
+cssFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/dist/css/${file}`, `${distFolder}/assets/dist/css/`)
+})
+
+jsFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/dist/js/${file}`, `${distFolder}/assets/dist/js/`)
+})
+
+imgFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`)
+})
+
+sh.rm(`${distFolder}/index.html`)
 
 // get all examples' HTML files
-sh.find(`${folderName}/**/*.html`).forEach(file => {
+sh.find(`${distFolder}/**/*.html`).forEach(file => {
   const fileContents = sh.cat(file)
     .toString()
     .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../')
@@ -54,9 +82,7 @@ sh.find(`${folderName}/**/*.html`).forEach(file => {
 })
 
 // create the zip file
-sh.exec(`zip -r9 "${folderName}.zip" "${folderName}"`, {
-  fatal: true
-})
+sh.exec(`zip -r9 "${distFolder}.zip" "${distFolder}"`)
 
 // remove the folder we created
-sh.rm('-rf', folderName)
+sh.rm('-rf', distFolder)

scss/_variables.scss

@@ -777,7 +777,7 @@ $dropdown-link-hover-bg:            $gray-200 !default;
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
 
-$dropdown-link-disabled-color:      $gray-600 !default;
+$dropdown-link-disabled-color:      $gray-500 !default;
 
 $dropdown-item-padding-y:           .25rem !default;
 $dropdown-item-padding-x:           1.5rem !default;

site/content/docs/4.5/extend/approach.md

@@ -75,3 +75,11 @@ Specifically regarding custom CSS, utilities can help combat increasing file siz
 ## Flexible HTML
 
 While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
+
+## Code conventions
+
+[Code Guide](https://codeguide.co/) (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.
+
+We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend.
+
+We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors.