Client Tasks v1 / Bootstrap configurable (#8822)

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

* correctly customize gutters
This commit is contained in:
Matteo Pagliazzi
2017-06-16 18:58:34 +02:00
committed by GitHub
parent 042e5a8d63
commit c4fa9426b3
3 changed files with 55 additions and 2 deletions

36
gulp/gulp-bootstrap.js Normal file
View File

@@ -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,
);
});

View File

@@ -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:build": "node webpack/build.js",
"client:dev": "gulp bootstrap && node webpack/dev-server.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",

View File

@@ -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);