Client Tasks v1 / Bootstrap configurable (#8822)

* make bs4 configurable, change gutters to match zeplin\s

* correctly customize gutters

gulp/gulp-bootstrap.js

@@ -0,0 +1,36 @@
+import gulp from 'gulp';
+import fs from 'fs';
+
+// Copy Bootstrap 4 config variables from /website /node_modules so we can check
+// them into Git
+
+const BOOSTRAP_NEW_CONFIG_PATH = 'website/client/assets/scss/bootstrap_config.scss';
+const BOOTSTRAP_ORIGINAL_CONFIG_PATH = 'node_modules/bootstrap/scss/_custom.scss';
+
+// https://stackoverflow.com/a/14387791/969528
+function copyFile(source, target, cb) {
+  let cbCalled = false;
+
+  function done(err) {
+    if (!cbCalled) {
+      cb(err);
+      cbCalled = true;
+    }
+  }
+
+  let rd = fs.createReadStream(source);
+  rd.on('error', done);
+  let wr = fs.createWriteStream(target);
+  wr.on('error', done);
+  wr.on('close', () => done());
+  rd.pipe(wr);
+}
+
+gulp.task('bootstrap', (done) => {
+  // use new config
+  copyFile(
+    BOOSTRAP_NEW_CONFIG_PATH,
+    BOOTSTRAP_ORIGINAL_CONFIG_PATH,
+    done,
+  );
+});

package.json

@@ -157,8 +157,8 @@
     "test:nodemon": "gulp test:nodemon",
     "coverage": "COVERAGE=true mocha --require register-handlers.js --reporter html-cov > coverage.html; open coverage.html",
     "sprites": "gulp sprites:compile",
-    "client:dev": "node webpack/dev-server.js",
+    "client:dev": "gulp bootstrap && node webpack/dev-server.js",
-    "client:build": "node webpack/build.js",
+    "client:build": "gulp bootstrap && node webpack/build.js",
     "client:unit": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js --single-run",
     "client:unit:watch": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js",
     "client:e2e": "node test/client/e2e/runner.js",

website/client/assets/scss/bootstrap_config.scss

@@ -0,0 +1,17 @@
+// Custom variables for Bootstrap 4
+
+
+// See here https://github.com/twbs/bootstrap/issues/22458
+// why it's not enough to just override $grid-gutter-width-base.
+//
+// Basically you have to copy here every variable from _variables.scss
+// that uses a custom variable.
+$grid-gutter-width-base: 24px;
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+);
+$card-deck-margin: ($grid-gutter-width-base / 2);