From 3555affd06e88bf30696df2ac3781f578fe6af89 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 12:06:03 -0800 Subject: [PATCH 01/21] Get Sass compilation in customizer task working --- customizer/config.yml | 180 +++++++++++++++++++++++++++++++++++++++++ customizer/lib/js.js | 28 +++++++ customizer/lib/sass.js | 43 ++++++++++ gulp/customizer.js | 40 +++++++++ package.json | 7 +- 5 files changed, 297 insertions(+), 1 deletion(-) create mode 100644 customizer/config.yml create mode 100644 customizer/lib/js.js create mode 100644 customizer/lib/sass.js create mode 100644 gulp/customizer.js diff --git a/customizer/config.yml b/customizer/config.yml new file mode 100644 index 0000000000..11bd709cbd --- /dev/null +++ b/customizer/config.yml @@ -0,0 +1,180 @@ +grid: + sass: grid + +typography: + sass: typography + +button: + sass: button + +forms: + sass: forms + +input_range: + sass: range-input + +accordion: + sass: accordion + js: accordion + js_utils: + - keyboard + - motion + +accordion_menu: + sass: accordion-menu + js: accordionMenu + js_utils: + - keyboard + - motion + - nest + +badge: + sass: badge + +breadcrumbs: + sass: breadcrumbs + +button_group: + sass: button-group + +callout: + sass: callout + +close_button: + sass: close-button + +drilldown_menu: + sass: drilldown-menu + js: drilldown + js_utils: + - keyboard + - motion + - nest + +dropdown: + sass: dropdown + js: dropdown + js_utils: + - keyboard + - box + - triggers + +dropdown_menu: + sass: dropdown-menu + js: dropdownMenu + js_utils: + - keyboard + - motion + - box + - nest + +flex_video: + sass: flex-video + +interchange: + js: interchange + js_utils: + - triggers + - timerAndImageLoader + +label: + sass: label + +magellan: + js: magellan + js_utils: + - motion + +media_object: + sass: media-object + +menu: + sass: menu + +off_canvas: + sass: off-canvas + +orbit: + sass: orbit + js: orbit + js_utils: + - motion + - timerAndImageLoader + - keyboard + - touch + +progress_bar: + sass: progress-bar + +progress_element: + sass: progress-element + +meter_element: + sass: meter-element + +slider: + sass: slider + js: slider + js_utils: + - box + - motion + - triggers + - mediaQuery + +sticky: + sass: sticky + js: sticky + js_utils: + - triggers + - mediaQuery + +reveal: + sass: reveal + js: reveal + js_utils: + - box + - motion + - triggers + - mediaQuery + +switch: + sass: switch + +table: + sass: table + +tabs: + sass: tabs + js: tabs + js_utils: + - keyboard + - timerAndImageLoader + +thumbnail: + sass: thumbnail + +title_bar: + sass: title-bar + +togger: + js: toggler + js_utils: + - motion + +tooltip: + sass: tooltip + js: tooltip + js_utils: + - box + - triggers + - mediaQuery + - motion + +top_bar: + sass: top-bar + +visibility: + sass: visibility-classes + +float: + sass: float-classes diff --git a/customizer/lib/js.js b/customizer/lib/js.js new file mode 100644 index 0000000000..cf8c8b69d5 --- /dev/null +++ b/customizer/lib/js.js @@ -0,0 +1,28 @@ +var unique = require('array-uniq'); + +module.exports = function(config, modules) { + var files = ['core']; + var utils = []; + var libraries = []; + + for (var i in modules) { + var name = modules[i]; + + // Check if the module has JS files + if (config[name] && config[name].js) { + libraries = libraries.push(config[name].js); + + // Check if the module has dependencies + if (config[name].js_utils) { + utils = utils.concat(config[name].js_utils); + } + } + } + + utils = unique(utils); + files = files.concat(utils, libraries); + + return files.map(function(file) { + return 'foundation.' + file + '.js'; + }); +} diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js new file mode 100644 index 0000000000..0d50bc59c3 --- /dev/null +++ b/customizer/lib/sass.js @@ -0,0 +1,43 @@ +var format = require('util').format; +var multiline = require('multiline'); + +var SASS_TEMPLATE = multiline(function() {/* + @charset 'utf-8'; + + // Variables go here + %s + + // Core imports go here + @import 'foundation'; + @import 'motion-ui'; + + // Modules go here + %s + + // Motion UI goes here + @include motion-ui-transitions; + @include motion-ui-animations; +*/}); + +module.exports = function(config, modules, variables) { + var CONFIG = config; + var variableList = []; + var exportList = []; + + // Create variable overrides code + for (var i in variables) { + var name = i.replace('_', '-'); + variableList.push(`$${name}: ${variables[i]}`); + } + + // Create module exports with @include + for (var i in modules) { + var name = modules[i]; + + if (CONFIG[name] && CONFIG[name].sass) { + exportList.push(`@include foundation-${CONFIG[name].sass};`); + } + } + + return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n ')) +} diff --git a/gulp/customizer.js b/gulp/customizer.js new file mode 100644 index 0000000000..3ff3f950b2 --- /dev/null +++ b/gulp/customizer.js @@ -0,0 +1,40 @@ +var gulp = require('gulp'); +var File = require('vinyl'); +var sassBuild = require('../customizer/lib/sass'); +var jsGlob = require('../customizer/lib/js'); +var fs = require('fs'); +var yaml = require('js-yaml').safeLoad; +var sass = require('gulp-sass'); +var Readable = require('stream').Readable; +var source = require('vinyl-source-stream'); + +var CUSTOMIZER_CONFIG; +var MODULE_LIST = ['accordion', 'tabs']; + +gulp.task('customizer:loadConfig', function(done) { + fs.readFile('customizer/config.yml', function(err, data) { + if (err) throw err; + CUSTOMIZER_CONFIG = yaml(data.toString()); + done(); + }); +}); + +gulp.task('customizer:sass', ['customizer:loadConfig'], function(done) { + var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, {}); + + var stream = new Readable({ objectMode: true }); + stream._read = function() {}; + stream.push(new File({ + path: 'foundation.scss', + contents: new Buffer(sassFile) + })); + + return stream + .pipe(sass({ + includePaths: [ + 'scss', + 'node_modules/motion-ui/src' + ] + })) + .pipe(gulp.dest('.customizer/css')); +}); diff --git a/package.json b/package.json index 2c92e16ad4..5c72658c48 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "license": "MIT", "devDependencies": { + "array-uniq": "^1.0.2", "babel-core": "^6.3.26", "babel-eslint": "^5.0.0", "babel-plugin-transform-es2015-arrow-functions": "^6.3.13", @@ -59,9 +60,11 @@ "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.1.0", "inquirer": "^0.11.4", + "js-yaml": "^3.5.4", "mocha": "^2.3.3", "mocha-phantomjs": "^4.0.2", "motion-ui": "^1.1.0", + "multiline": "^1.0.2", "octophant": "^1.0.0", "opener": "^1.4.1", "panini": "^1.1.1", @@ -72,7 +75,9 @@ "run-sequence": "^1.1.4", "sass-true": "^2.0.3", "sinon": "^1.17.3", - "supercollider": "^1.4.0" + "supercollider": "^1.4.0", + "vinyl": "^1.1.1", + "vinyl-source-stream": "^1.1.0" }, "repository": { "type": "git", From e5700b0cb0baa40e66c929b4d6697cc63ec1de3a Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 12:36:45 -0800 Subject: [PATCH 02/21] Create compressed version of CSS for customizer build --- customizer/lib/sass.js | 2 +- gulp/customizer.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index 0d50bc59c3..c821591e33 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -22,7 +22,7 @@ var SASS_TEMPLATE = multiline(function() {/* module.exports = function(config, modules, variables) { var CONFIG = config; var variableList = []; - var exportList = []; + var exportList = ['@include foundation-global-styles;']; // Create variable overrides code for (var i in variables) { diff --git a/gulp/customizer.js b/gulp/customizer.js index 3ff3f950b2..2b99b346ce 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -7,6 +7,8 @@ var yaml = require('js-yaml').safeLoad; var sass = require('gulp-sass'); var Readable = require('stream').Readable; var source = require('vinyl-source-stream'); +var cssnano = require('gulp-cssnano'); +var rename = require('gulp-rename'); var CUSTOMIZER_CONFIG; var MODULE_LIST = ['accordion', 'tabs']; @@ -36,5 +38,8 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function(done) { 'node_modules/motion-ui/src' ] })) + .pipe(gulp.dest('.customizer/css')) + .pipe(cssnano()) + .pipe(rename('foundation.min.css')) .pipe(gulp.dest('.customizer/css')); }); From c457c66ee7d855f00defd1cfc8eb70ae905017c7 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 13:06:04 -0800 Subject: [PATCH 03/21] Get JavaScript and index.html copying to customizer build --- .gitignore | 1 + customizer/index.html | 168 ++++++++++++++++++++++++++++++++++++++++++ customizer/lib/js.js | 4 +- gulp/customizer.js | 35 ++++++++- package.json | 1 + 5 files changed, 206 insertions(+), 3 deletions(-) create mode 100644 customizer/index.html diff --git a/.gitignore b/.gitignore index 6a26f24557..e215dffda3 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ .sass-cache/* .yardoc _build +.customizer bower_components bundle diff --git a/customizer/index.html b/customizer/index.html new file mode 100644 index 0000000000..731e2639c1 --- /dev/null +++ b/customizer/index.html @@ -0,0 +1,168 @@ + + + + + + + Foundation for Sites + + + +
+
+

Welcome to Foundation

+
+
+ +
+
+
+

We’re stoked you want to try Foundation!

+

To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.

+

Once you've exhausted the fun in this document, you should check out:

+
+
+

Foundation Documentation
Everything you need to know about using the framework.

+
+
+

Foundation Code Skills
These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.

+
+
+

Foundation Forum
Join the Foundation community to ask a question or show off your knowlege.

+
+
+
+
+

Foundation on Github
Latest code, issue reports, feature requests and more.

+
+
+

@zurbfoundation
Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).

+
+
+
+
+
+ +
+
+
Here’s your basic grid:
+ + +
+
+
+

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.

+
+
+
+
+
+
+

Six columns

+
+
+
+
+

Six columns

+
+
+
+
+
+
+

Four columns

+
+
+
+
+

Four columns

+
+
+
+
+

Four columns

+
+
+
+ +
+ +
We bet you’ll need a form somewhere:
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+ + .com +
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
+ + + +
+
+
+
+ + +
+
+
+
+ +
+
Try one of these buttons:
+

Simple Button
+ Success Btn
+ Alert Btn
+ Secondary Btn

+
+
So many components, girl!
+

A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.

+ Go to Foundation Docs +
+
+
+ + + + + + + diff --git a/customizer/lib/js.js b/customizer/lib/js.js index cf8c8b69d5..66f9a9eafa 100644 --- a/customizer/lib/js.js +++ b/customizer/lib/js.js @@ -10,7 +10,7 @@ module.exports = function(config, modules) { // Check if the module has JS files if (config[name] && config[name].js) { - libraries = libraries.push(config[name].js); + libraries.push(config[name].js); // Check if the module has dependencies if (config[name].js_utils) { @@ -23,6 +23,6 @@ module.exports = function(config, modules) { files = files.concat(utils, libraries); return files.map(function(file) { - return 'foundation.' + file + '.js'; + return 'js/foundation.' + file + '.js'; }); } diff --git a/gulp/customizer.js b/gulp/customizer.js index 2b99b346ce..22627c14d2 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -9,6 +9,10 @@ var Readable = require('stream').Readable; var source = require('vinyl-source-stream'); var cssnano = require('gulp-cssnano'); var rename = require('gulp-rename'); +var concat = require('gulp-concat'); +var babel = require('gulp-babel'); +var uglify = require('gulp-uglify'); +var touch = require('touch'); var CUSTOMIZER_CONFIG; var MODULE_LIST = ['accordion', 'tabs']; @@ -21,15 +25,17 @@ gulp.task('customizer:loadConfig', function(done) { }); }); -gulp.task('customizer:sass', ['customizer:loadConfig'], function(done) { +gulp.task('customizer:sass', ['customizer:loadConfig'], function() { var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, {}); + // Create a stream with our makeshift Sass file var stream = new Readable({ objectMode: true }); stream._read = function() {}; stream.push(new File({ path: 'foundation.scss', contents: new Buffer(sassFile) })); + stream.push(null); return stream .pipe(sass({ @@ -43,3 +49,30 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function(done) { .pipe(rename('foundation.min.css')) .pipe(gulp.dest('.customizer/css')); }); + +gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { + var jsPaths = jsGlob(CUSTOMIZER_CONFIG, MODULE_LIST); + + return gulp.src(jsPaths) + .pipe(babel()) + .pipe(concat('foundation.js')) + .pipe(gulp.dest('.customizer/js/vendor')) + .pipe(uglify()) + .pipe(rename('foundation.min.js')) + .pipe(gulp.src([ + 'node_modules/jquery/dist/jquery.js', + 'node_modules/what-input/what-input.js' + ])) + .pipe(gulp.dest('.customizer/js/vendor')); +}); + +gulp.task('customizer:html', ['customizer:loadConfig'], function() { + return gulp.src('customizer/index.html') + .pipe(gulp.dest('.customizer')); +}); + +gulp.task('customizer', ['customizer:sass', 'customizer:javascript', 'customizer:html'], function(done) { + touch('.customizer/css/app.css'); + touch('.customizer/js/app.js'); + fs.writeFile('.customizer/js/app.js', '$(document).foundation()\n', done); +}); diff --git a/package.json b/package.json index 5c72658c48..13804b3ebe 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "sass-true": "^2.0.3", "sinon": "^1.17.3", "supercollider": "^1.4.0", + "touch": "^1.0.0", "vinyl": "^1.1.1", "vinyl-source-stream": "^1.1.0" }, From b7446dac0d127ab46233442dd290052bbd92d3aa Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 13:32:23 -0800 Subject: [PATCH 04/21] In customizer, consume module list through a command line flag --- customizer/build-template.json | 11 +++++++++++ customizer/lib/sass.js | 2 +- gulp/customizer.js | 22 ++++++++++++++-------- 3 files changed, 26 insertions(+), 9 deletions(-) create mode 100644 customizer/build-template.json diff --git a/customizer/build-template.json b/customizer/build-template.json new file mode 100644 index 0000000000..06a4fd2809 --- /dev/null +++ b/customizer/build-template.json @@ -0,0 +1,11 @@ +{ + "modules": [ + "accordion", + "tabs", + "button" + ], + "variables": { + "global-text-direction": "true", + "primary-color": "dodgerblue" + } +} diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index c821591e33..086618f989 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -27,7 +27,7 @@ module.exports = function(config, modules, variables) { // Create variable overrides code for (var i in variables) { var name = i.replace('_', '-'); - variableList.push(`$${name}: ${variables[i]}`); + variableList.push(`$${name}: ${variables[i]};`); } // Create module exports with @include diff --git a/gulp/customizer.js b/gulp/customizer.js index 22627c14d2..4e3eca094b 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -13,20 +13,26 @@ var concat = require('gulp-concat'); var babel = require('gulp-babel'); var uglify = require('gulp-uglify'); var touch = require('touch'); +var yargs = require('yargs'); +var path = require('path'); + +var argv = require('yargs').argv; var CUSTOMIZER_CONFIG; -var MODULE_LIST = ['accordion', 'tabs']; +var MODULE_LIST; + +gulp.task('customizer:loadConfig', function() { + var config = fs.readFileSync('customizer/config.yml'); + var moduleListPath = path.relative(__dirname, path.join(process.cwd(), argv.modules)); + var moduleList = require(moduleListPath); -gulp.task('customizer:loadConfig', function(done) { - fs.readFile('customizer/config.yml', function(err, data) { - if (err) throw err; - CUSTOMIZER_CONFIG = yaml(data.toString()); - done(); - }); + CUSTOMIZER_CONFIG = yaml(config.toString()); + MODULE_LIST = moduleList.modules; + VARIABLE_LIST = moduleList.variables; }); gulp.task('customizer:sass', ['customizer:loadConfig'], function() { - var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, {}); + var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, VARIABLE_LIST); // Create a stream with our makeshift Sass file var stream = new Readable({ objectMode: true }); From 5c158c55303071c9d389785d4156618de2492576 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 13:37:41 -0800 Subject: [PATCH 05/21] Group customizer libraries into one module export --- customizer/lib/index.js | 4 ++++ gulp/customizer.js | 30 ++++++++++++++---------------- 2 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 customizer/lib/index.js diff --git a/customizer/lib/index.js b/customizer/lib/index.js new file mode 100644 index 0000000000..ba43e9a8a1 --- /dev/null +++ b/customizer/lib/index.js @@ -0,0 +1,4 @@ +module.exports = { + sass: require('./sass'), + js: require('./js') +} diff --git a/gulp/customizer.js b/gulp/customizer.js index 4e3eca094b..29e4f468a6 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -1,29 +1,27 @@ -var gulp = require('gulp'); +var babel = require('gulp-babel'); +var concat = require('gulp-concat'); +var cssnano = require('gulp-cssnano'); +var customizer = require('../customizer/lib'); var File = require('vinyl'); -var sassBuild = require('../customizer/lib/sass'); -var jsGlob = require('../customizer/lib/js'); var fs = require('fs'); -var yaml = require('js-yaml').safeLoad; -var sass = require('gulp-sass'); +var gulp = require('gulp'); +var path = require('path'); var Readable = require('stream').Readable; -var source = require('vinyl-source-stream'); -var cssnano = require('gulp-cssnano'); var rename = require('gulp-rename'); -var concat = require('gulp-concat'); -var babel = require('gulp-babel'); -var uglify = require('gulp-uglify'); +var sass = require('gulp-sass'); +var source = require('vinyl-source-stream'); var touch = require('touch'); +var uglify = require('gulp-uglify'); +var yaml = require('js-yaml').safeLoad; var yargs = require('yargs'); -var path = require('path'); - -var argv = require('yargs').argv; +var ARGS = require('yargs').argv; var CUSTOMIZER_CONFIG; var MODULE_LIST; gulp.task('customizer:loadConfig', function() { var config = fs.readFileSync('customizer/config.yml'); - var moduleListPath = path.relative(__dirname, path.join(process.cwd(), argv.modules)); + var moduleListPath = path.relative(__dirname, path.join(process.cwd(), ARGS.modules)); var moduleList = require(moduleListPath); CUSTOMIZER_CONFIG = yaml(config.toString()); @@ -32,7 +30,7 @@ gulp.task('customizer:loadConfig', function() { }); gulp.task('customizer:sass', ['customizer:loadConfig'], function() { - var sassFile = sassBuild(CUSTOMIZER_CONFIG, MODULE_LIST, VARIABLE_LIST); + var sassFile = customizer.sass(CUSTOMIZER_CONFIG, MODULE_LIST, VARIABLE_LIST); // Create a stream with our makeshift Sass file var stream = new Readable({ objectMode: true }); @@ -57,7 +55,7 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function() { }); gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { - var jsPaths = jsGlob(CUSTOMIZER_CONFIG, MODULE_LIST); + var jsPaths = customizer.js(CUSTOMIZER_CONFIG, MODULE_LIST); return gulp.src(jsPaths) .pipe(babel()) From cb06f6ae641b0a0a807abd6f0ceff08feab39d3f Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 14:03:14 -0800 Subject: [PATCH 06/21] Comment all the customizer-related things --- customizer/config.yml | 6 ++++++ customizer/lib/js.js | 10 ++++++++++ customizer/lib/sass.js | 7 +++++++ gulp/customizer.js | 13 +++++++++++++ 4 files changed, 36 insertions(+) diff --git a/customizer/config.yml b/customizer/config.yml index 11bd709cbd..4b7dda152f 100644 --- a/customizer/config.yml +++ b/customizer/config.yml @@ -1,3 +1,9 @@ +# This is the customizer's master module list. +# Each item in the list is a module with any of these keys: +# - sass: Name of the CSS export. 'grid' becomes '@include foundation-grid;' +# - js: Name of the JavaScript file. 'accordion' becomes 'foundation.accordion.js' +# - js_utils: Names of plugin dependencies. 'box' becomes 'foundation.util.box.js' + grid: sass: grid diff --git a/customizer/lib/js.js b/customizer/lib/js.js index 66f9a9eafa..d8546194bf 100644 --- a/customizer/lib/js.js +++ b/customizer/lib/js.js @@ -1,5 +1,11 @@ var unique = require('array-uniq'); +/** + * Creates an array of file paths that can be passed to `gulp.src()`. + * @param {Object} config - Customizer configuration file. + * @param {String[]} modules - Modules to include in the file list. + * @returns {String[]} Array of file paths. + */ module.exports = function(config, modules) { var files = ['core']; var utils = []; @@ -19,9 +25,13 @@ module.exports = function(config, modules) { } } + // Prune duplicate entries from the list of utility files utils = unique(utils); + + // Combine foundation.core.js, utilities, and plugins into one array files = files.concat(utils, libraries); + // Format the modules as paths return files.map(function(file) { return 'js/foundation.' + file + '.js'; }); diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index 086618f989..69d6faf0a3 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -19,6 +19,13 @@ var SASS_TEMPLATE = multiline(function() {/* @include motion-ui-animations; */}); +/** + * Generates an entry point Sass file with a custom list of CSS exports and Sass variables. + * @param {Object} config - Customizer configuration object. + * @param {String[]} modules - Modules to include CSS for. + * @param {Object} variables - Sass variable overrides to include. The key is the name of the variable, and the value is the value. + * @returns {String} Formatted Sass file. + */ module.exports = function(config, modules, variables) { var CONFIG = config; var variableList = []; diff --git a/gulp/customizer.js b/gulp/customizer.js index 29e4f468a6..364557c580 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -19,8 +19,12 @@ var ARGS = require('yargs').argv; var CUSTOMIZER_CONFIG; var MODULE_LIST; +// Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override gulp.task('customizer:loadConfig', function() { + // Config file with list of all Foundation modules and dependencies var config = fs.readFileSync('customizer/config.yml'); + + // Module file, created from customizer form data var moduleListPath = path.relative(__dirname, path.join(process.cwd(), ARGS.modules)); var moduleList = require(moduleListPath); @@ -29,6 +33,7 @@ gulp.task('customizer:loadConfig', function() { VARIABLE_LIST = moduleList.variables; }); +// Creates a Sass file from the module/variable list and creates foundation.css and foundation.min.css gulp.task('customizer:sass', ['customizer:loadConfig'], function() { var sassFile = customizer.sass(CUSTOMIZER_CONFIG, MODULE_LIST, VARIABLE_LIST); @@ -54,6 +59,7 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function() { .pipe(gulp.dest('.customizer/css')); }); +// Creates a Foundation JavaScript file from the module list, and also copies dependencies (jQuery, what-input) gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { var jsPaths = customizer.js(CUSTOMIZER_CONFIG, MODULE_LIST); @@ -70,11 +76,18 @@ gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { .pipe(gulp.dest('.customizer/js/vendor')); }); +// Copies the boilerplate index.html to the custom download folder gulp.task('customizer:html', ['customizer:loadConfig'], function() { return gulp.src('customizer/index.html') .pipe(gulp.dest('.customizer')); }); +// Creates a custom build by: +// - Generating a CSS file +// - Generating a JS file +// - Copying the index.html file +// - Creating a blank app.css file +// - Creating an app.js file with Foundation initialization code gulp.task('customizer', ['customizer:sass', 'customizer:javascript', 'customizer:html'], function(done) { touch('.customizer/css/app.css'); touch('.customizer/js/app.js'); From f61d486ea370e53ce49246a71d2914be6fced820 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 14:17:24 -0800 Subject: [PATCH 07/21] Add customizer presets for complete and essential download --- customizer/build-template.json | 11 ---------- customizer/complete.json | 40 ++++++++++++++++++++++++++++++++++ customizer/essential.json | 9 ++++++++ customizer/lib/js.js | 5 +++++ customizer/lib/sass.js | 5 +++++ package.json | 1 + 6 files changed, 60 insertions(+), 11 deletions(-) delete mode 100644 customizer/build-template.json create mode 100644 customizer/complete.json create mode 100644 customizer/essential.json diff --git a/customizer/build-template.json b/customizer/build-template.json deleted file mode 100644 index 06a4fd2809..0000000000 --- a/customizer/build-template.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "modules": [ - "accordion", - "tabs", - "button" - ], - "variables": { - "global-text-direction": "true", - "primary-color": "dodgerblue" - } -} diff --git a/customizer/complete.json b/customizer/complete.json new file mode 100644 index 0000000000..89f3423591 --- /dev/null +++ b/customizer/complete.json @@ -0,0 +1,40 @@ +{ + "modules": [ + "grid", + "typography", + "button", + "forms", + "accordion", + "accordion_menu", + "badge", + "breadcrumbs", + "button_group", + "callout", + "close_button", + "menu", + "menu_icon", + "drilldown", + "dropdown", + "dropdown_menu", + "flex_video", + "label", + "media_object", + "off_canvas", + "orbi", + "pagination", + "progress_bar", + "slider", + "sticky", + "reveal", + "switch", + "table", + "tabs", + "thumbnail", + "title_bar", + "tooltip", + "top_bar", + "visibility", + "float" + ], + "variables": {} +} diff --git a/customizer/essential.json b/customizer/essential.json new file mode 100644 index 0000000000..7a90fca5f6 --- /dev/null +++ b/customizer/essential.json @@ -0,0 +1,9 @@ +{ + "modules": [ + "typography", + "grid", + "buttons", + "reveal" + ], + "variables": {} +} diff --git a/customizer/lib/js.js b/customizer/lib/js.js index d8546194bf..f10b0d36a2 100644 --- a/customizer/lib/js.js +++ b/customizer/lib/js.js @@ -1,3 +1,4 @@ +var empty = require('is-empty-object'); var unique = require('array-uniq'); /** @@ -11,6 +12,10 @@ module.exports = function(config, modules) { var utils = []; var libraries = []; + if (empty(modules)) { + modules = Object.keys(config); + } + for (var i in modules) { var name = modules[i]; diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index 69d6faf0a3..b93b7c533f 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -1,3 +1,4 @@ +var empty = require('is-empty-object'); var format = require('util').format; var multiline = require('multiline'); @@ -31,6 +32,10 @@ module.exports = function(config, modules, variables) { var variableList = []; var exportList = ['@include foundation-global-styles;']; + if (empty(modules)) { + modules = Object.keys(config); + } + // Create variable overrides code for (var i in variables) { var name = i.replace('_', '-'); diff --git a/package.json b/package.json index 13804b3ebe..df1e97839a 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.1.0", "inquirer": "^0.11.4", + "is-empty-object": "^1.1.1", "js-yaml": "^3.5.4", "mocha": "^2.3.3", "mocha-phantomjs": "^4.0.2", From ef7951c84955c066efaabbea95fc4d155ba49d68 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 14:29:42 -0800 Subject: [PATCH 08/21] In the customizer, flip the dir attribute of if RTL is enabled in Sass --- customizer/index.html | 2 +- gulp/customizer.js | 6 ++++++ package.json | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/customizer/index.html b/customizer/index.html index 731e2639c1..0ecdf7e1bb 100644 --- a/customizer/index.html +++ b/customizer/index.html @@ -1,5 +1,5 @@ - + diff --git a/gulp/customizer.js b/gulp/customizer.js index 364557c580..1010986ffd 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -5,8 +5,10 @@ var customizer = require('../customizer/lib'); var File = require('vinyl'); var fs = require('fs'); var gulp = require('gulp'); +var If = require('gulp-if'); var path = require('path'); var Readable = require('stream').Readable; +var replace = require('gulp-replace'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var source = require('vinyl-source-stream'); @@ -18,6 +20,7 @@ var yargs = require('yargs'); var ARGS = require('yargs').argv; var CUSTOMIZER_CONFIG; var MODULE_LIST; +var VARIABLE_LIST; // Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override gulp.task('customizer:loadConfig', function() { @@ -78,7 +81,10 @@ gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { // Copies the boilerplate index.html to the custom download folder gulp.task('customizer:html', ['customizer:loadConfig'], function() { + var rtlEnabled = VARIABLE_LIST['global-text-direction'] && VARIABLE_LIST['global-text-direction'] === 'rtl'; + return gulp.src('customizer/index.html') + .pipe(If(rtlEnabled, replace('ltr', 'rtl'))) .pipe(gulp.dest('.customizer')); }); diff --git a/package.json b/package.json index df1e97839a..9a99e2b52c 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "gulp-cssnano": "^2.1.0", "gulp-eslint": "^2.0.0", "gulp-filter": "^3.0.1", + "gulp-if": "^2.0.0", "gulp-load-plugins": "^1.2.0", "gulp-mocha": "^2.2.0", "gulp-newer": "^1.1.0", From cd07d791f690ff0bdf8f91efc21d762fe854f963 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 14:59:53 -0800 Subject: [PATCH 09/21] In customizer, add missing components to essentials download, and always load util.mediaQuery --- customizer/essential.json | 4 +++- customizer/index.html | 1 + customizer/lib/js.js | 6 ++++-- customizer/lib/sass.js | 4 ++-- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/customizer/essential.json b/customizer/essential.json index 7a90fca5f6..05ed36302d 100644 --- a/customizer/essential.json +++ b/customizer/essential.json @@ -2,7 +2,9 @@ "modules": [ "typography", "grid", - "buttons", + "forms", + "button", + "callout", "reveal" ], "variables": {} diff --git a/customizer/index.html b/customizer/index.html index 0ecdf7e1bb..486ac94ed9 100644 --- a/customizer/index.html +++ b/customizer/index.html @@ -5,6 +5,7 @@ Foundation for Sites + diff --git a/customizer/lib/js.js b/customizer/lib/js.js index f10b0d36a2..e7763d1f88 100644 --- a/customizer/lib/js.js +++ b/customizer/lib/js.js @@ -9,7 +9,7 @@ var unique = require('array-uniq'); */ module.exports = function(config, modules) { var files = ['core']; - var utils = []; + var utils = ['mediaQuery']; var libraries = []; if (empty(modules)) { @@ -31,7 +31,9 @@ module.exports = function(config, modules) { } // Prune duplicate entries from the list of utility files - utils = unique(utils); + utils = unique(utils).map(function(name) { + return 'util.' + name; + }); // Combine foundation.core.js, utilities, and plugins into one array files = files.concat(utils, libraries); diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index b93b7c533f..96b2760bec 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -39,7 +39,7 @@ module.exports = function(config, modules, variables) { // Create variable overrides code for (var i in variables) { var name = i.replace('_', '-'); - variableList.push(`$${name}: ${variables[i]};`); + variableList.push(format('$%s: %s;', name, variables[i])); } // Create module exports with @include @@ -47,7 +47,7 @@ module.exports = function(config, modules, variables) { var name = modules[i]; if (CONFIG[name] && CONFIG[name].sass) { - exportList.push(`@include foundation-${CONFIG[name].sass};`); + exportList.push(format('@include foundation-%s;', CONFIG[name].sass)); } } From 9369bb7bbba540383c54b74a9bebfe79d14c56bc Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 16:43:37 -0800 Subject: [PATCH 10/21] Zip custom download after being created --- gulp/customizer.js | 12 +++++++++++- package.json | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index 1010986ffd..b84519f29e 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -10,14 +10,17 @@ var path = require('path'); var Readable = require('stream').Readable; var replace = require('gulp-replace'); var rename = require('gulp-rename'); +var rimraf = require('rimraf'); var sass = require('gulp-sass'); var source = require('vinyl-source-stream'); var touch = require('touch'); var uglify = require('gulp-uglify'); var yaml = require('js-yaml').safeLoad; var yargs = require('yargs'); +var zip = require('gulp-zip'); var ARGS = require('yargs').argv; +var FOUNDATION_VERSION = require('../package.json').version; var CUSTOMIZER_CONFIG; var MODULE_LIST; var VARIABLE_LIST; @@ -97,5 +100,12 @@ gulp.task('customizer:html', ['customizer:loadConfig'], function() { gulp.task('customizer', ['customizer:sass', 'customizer:javascript', 'customizer:html'], function(done) { touch('.customizer/css/app.css'); touch('.customizer/js/app.js'); - fs.writeFile('.customizer/js/app.js', '$(document).foundation()\n', done); + fs.writeFileSync('.customizer/js/app.js', '$(document).foundation()\n'); + + gulp.src('.customizer/**/*') + .pipe(zip('foundation-' + FOUNDATION_VERSION + '.zip')) + .pipe(gulp.dest('.')) + .on('finish', function() { + rimraf('.customizer', done); + }); }); diff --git a/package.json b/package.json index 9a99e2b52c..5ef55ffe33 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "gulp-scss-lint": "^0.3.9", "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.1.0", + "gulp-zip": "^3.2.0", "inquirer": "^0.11.4", "is-empty-object": "^1.1.1", "js-yaml": "^3.5.4", From fc9669633e44cd5eb0e2e80827ff9b17a4d888d0 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 11 Mar 2016 16:54:34 -0800 Subject: [PATCH 11/21] Add missing yargs dependency to package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 5ef55ffe33..fc833b5e4d 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,8 @@ "supercollider": "^1.4.0", "touch": "^1.0.0", "vinyl": "^1.1.1", - "vinyl-source-stream": "^1.1.0" + "vinyl-source-stream": "^1.1.0", + "yargs": "^4.2.0" }, "repository": { "type": "git", From b3737684a125cfc34a05ad8ced73cbc889e27406 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Mon, 14 Mar 2016 16:54:12 -0700 Subject: [PATCH 12/21] Get rid of relative path stuff --- gulp/customizer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index b84519f29e..3abc87a2f0 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -31,7 +31,7 @@ gulp.task('customizer:loadConfig', function() { var config = fs.readFileSync('customizer/config.yml'); // Module file, created from customizer form data - var moduleListPath = path.relative(__dirname, path.join(process.cwd(), ARGS.modules)); + var moduleListPath = ARGS.modules; var moduleList = require(moduleListPath); CUSTOMIZER_CONFIG = yaml(config.toString()); From f35b72ffe8757a616170b6d2178d945d17f12eb1 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 15 Mar 2016 10:10:00 -0700 Subject: [PATCH 13/21] Add --output flag to customizer to change output ZIP file --- gulp/customizer.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index 3abc87a2f0..91d4fc3afa 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -21,22 +21,22 @@ var zip = require('gulp-zip'); var ARGS = require('yargs').argv; var FOUNDATION_VERSION = require('../package.json').version; +var OUTPUT_DIR = ARGS.output; var CUSTOMIZER_CONFIG; var MODULE_LIST; var VARIABLE_LIST; // Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override -gulp.task('customizer:loadConfig', function() { - // Config file with list of all Foundation modules and dependencies - var config = fs.readFileSync('customizer/config.yml'); +gulp.task('customizer:loadConfig', function(done) { + fs.readFile('customizer/config.yml', function(err, data) { + var moduleListPath = ARGS.modules; + var moduleList = require(moduleListPath); - // Module file, created from customizer form data - var moduleListPath = ARGS.modules; - var moduleList = require(moduleListPath); - - CUSTOMIZER_CONFIG = yaml(config.toString()); - MODULE_LIST = moduleList.modules; - VARIABLE_LIST = moduleList.variables; + CUSTOMIZER_CONFIG = yaml(data.toString()); + MODULE_LIST = moduleList.modules; + VARIABLE_LIST = moduleList.variables; + done(); + }); }); // Creates a Sass file from the module/variable list and creates foundation.css and foundation.min.css @@ -62,7 +62,7 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function() { .pipe(gulp.dest('.customizer/css')) .pipe(cssnano()) .pipe(rename('foundation.min.css')) - .pipe(gulp.dest('.customizer/css')); + .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css'))); }); // Creates a Foundation JavaScript file from the module list, and also copies dependencies (jQuery, what-input) @@ -79,7 +79,7 @@ gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { 'node_modules/jquery/dist/jquery.js', 'node_modules/what-input/what-input.js' ])) - .pipe(gulp.dest('.customizer/js/vendor')); + .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor'))); }); // Copies the boilerplate index.html to the custom download folder @@ -88,7 +88,7 @@ gulp.task('customizer:html', ['customizer:loadConfig'], function() { return gulp.src('customizer/index.html') .pipe(If(rtlEnabled, replace('ltr', 'rtl'))) - .pipe(gulp.dest('.customizer')); + .pipe(gulp.dest(OUTPUT_DIR)); }); // Creates a custom build by: @@ -98,14 +98,14 @@ gulp.task('customizer:html', ['customizer:loadConfig'], function() { // - Creating a blank app.css file // - Creating an app.js file with Foundation initialization code gulp.task('customizer', ['customizer:sass', 'customizer:javascript', 'customizer:html'], function(done) { - touch('.customizer/css/app.css'); - touch('.customizer/js/app.js'); - fs.writeFileSync('.customizer/js/app.js', '$(document).foundation()\n'); + touch(path.join(OUTPUT_DIR, 'css/app.css')); + touch(path.join(OUTPUT_DIR, 'js/app.js')); + fs.writeFileSync(path.join(OUTPUT_DIR, 'js/app.js'), '$(document).foundation()\n'); - gulp.src('.customizer/**/*') - .pipe(zip('foundation-' + FOUNDATION_VERSION + '.zip')) + gulp.src(path.join(OUTPUT_DIR, '/**/*')) + .pipe(zip(path.basename(OUTPUT_DIR) + '.zip')) .pipe(gulp.dest('.')) .on('finish', function() { - rimraf('.customizer', done); + rimraf(OUTPUT_DIR, done); }); }); From 459df9c5ebb228188d53e1f0b7f152e58ff3b841 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Wed, 16 Mar 2016 15:04:07 -0700 Subject: [PATCH 14/21] Allow paths to be passed to the --output flag of the customizer --- gulp/customizer.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index 91d4fc3afa..32f80983b2 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -98,13 +98,16 @@ gulp.task('customizer:html', ['customizer:loadConfig'], function() { // - Creating a blank app.css file // - Creating an app.js file with Foundation initialization code gulp.task('customizer', ['customizer:sass', 'customizer:javascript', 'customizer:html'], function(done) { + var outputFolder = path.dirname(OUTPUT_DIR); + var outputFileName = path.basename(OUTPUT_DIR); + touch(path.join(OUTPUT_DIR, 'css/app.css')); touch(path.join(OUTPUT_DIR, 'js/app.js')); fs.writeFileSync(path.join(OUTPUT_DIR, 'js/app.js'), '$(document).foundation()\n'); gulp.src(path.join(OUTPUT_DIR, '/**/*')) - .pipe(zip(path.basename(OUTPUT_DIR) + '.zip')) - .pipe(gulp.dest('.')) + .pipe(zip(path.basename(outputFileName) + '.zip')) + .pipe(gulp.dest(outputFolder)) .on('finish', function() { rimraf(OUTPUT_DIR, done); }); From 34738bf508b7c974ba1d971afab1f72b62a461e1 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 28 Mar 2016 13:03:20 -0700 Subject: [PATCH 15/21] Ensure that customizer config presets and module list are complete --- customizer/complete.json | 13 ++++++++++--- customizer/config.yml | 20 +++++++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/customizer/complete.json b/customizer/complete.json index 89f3423591..d986cb840a 100644 --- a/customizer/complete.json +++ b/customizer/complete.json @@ -4,6 +4,7 @@ "typography", "button", "forms", + "abide", "accordion", "accordion_menu", "badge", @@ -13,24 +14,30 @@ "close_button", "menu", "menu_icon", - "drilldown", + "drilldown_menu", "dropdown", "dropdown_menu", + "equalizer", "flex_video", + "interchange", "label", + "magellan", "media_object", "off_canvas", - "orbi", + "orbit", "pagination", "progress_bar", + "responsive_menu", + "responsive_toggle", + "reveal", "slider", "sticky", - "reveal", "switch", "table", "tabs", "thumbnail", "title_bar", + "toggler", "tooltip", "top_bar", "visibility", diff --git a/customizer/config.yml b/customizer/config.yml index 4b7dda152f..a315fc33cc 100644 --- a/customizer/config.yml +++ b/customizer/config.yml @@ -19,6 +19,9 @@ forms: input_range: sass: range-input +abide: + js: abide + accordion: sass: accordion js: accordion @@ -74,6 +77,9 @@ dropdown_menu: - box - nest +equalizer: + js: equalizer + flex_video: sass: flex-video @@ -99,6 +105,7 @@ menu: off_canvas: sass: off-canvas + js: offcanvas orbit: sass: orbit @@ -115,6 +122,17 @@ progress_bar: progress_element: sass: progress-element +responsive_menu: + js: responsiveMenu + js_utils: + - triggers + - mediaQuery + +responsive_toggle: + js: responsiveToggle + js_utils: + - mediaQuery + meter_element: sass: meter-element @@ -162,7 +180,7 @@ thumbnail: title_bar: sass: title-bar -togger: +toggler: js: toggler js_utils: - motion From dde350edebf6678ec4cfde21e0112df6918be07f Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 28 Mar 2016 13:17:16 -0700 Subject: [PATCH 16/21] In customizer Gulp tasks, add default values for the --modules and --output flags, and ensure all files print to the correct output directory --- gulp/customizer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index 32f80983b2..c800994cdd 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -21,7 +21,7 @@ var zip = require('gulp-zip'); var ARGS = require('yargs').argv; var FOUNDATION_VERSION = require('../package.json').version; -var OUTPUT_DIR = ARGS.output; +var OUTPUT_DIR = ARGS.output || 'custom-build'; var CUSTOMIZER_CONFIG; var MODULE_LIST; var VARIABLE_LIST; @@ -29,7 +29,7 @@ var VARIABLE_LIST; // Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override gulp.task('customizer:loadConfig', function(done) { fs.readFile('customizer/config.yml', function(err, data) { - var moduleListPath = ARGS.modules; + var moduleListPath = ARGS.modules || '../customizer/complete'; var moduleList = require(moduleListPath); CUSTOMIZER_CONFIG = yaml(data.toString()); @@ -59,7 +59,7 @@ gulp.task('customizer:sass', ['customizer:loadConfig'], function() { 'node_modules/motion-ui/src' ] })) - .pipe(gulp.dest('.customizer/css')) + .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css'))) .pipe(cssnano()) .pipe(rename('foundation.min.css')) .pipe(gulp.dest(path.join(OUTPUT_DIR, 'css'))); @@ -72,7 +72,7 @@ gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { return gulp.src(jsPaths) .pipe(babel()) .pipe(concat('foundation.js')) - .pipe(gulp.dest('.customizer/js/vendor')) + .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor'))) .pipe(uglify()) .pipe(rename('foundation.min.js')) .pipe(gulp.src([ From 57db3442ef8273e7eeff7bfcf3aac0e4e09342bd Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 28 Mar 2016 13:19:15 -0700 Subject: [PATCH 17/21] In customizer Gulp task, ensure all JavaScript files are properly included --- gulp/customizer.js | 3 ++- package.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index c800994cdd..5a7e4d3060 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -1,3 +1,4 @@ +var addSrc = require('gulp-add-src'); var babel = require('gulp-babel'); var concat = require('gulp-concat'); var cssnano = require('gulp-cssnano'); @@ -75,7 +76,7 @@ gulp.task('customizer:javascript', ['customizer:loadConfig'], function() { .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor'))) .pipe(uglify()) .pipe(rename('foundation.min.js')) - .pipe(gulp.src([ + .pipe(addSrc([ 'node_modules/jquery/dist/jquery.js', 'node_modules/what-input/what-input.js' ])) diff --git a/package.json b/package.json index fc833b5e4d..f90ec03671 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "corejs-typeahead": "corejavascript/typeahead.js", "foundation-docs": "zurb/foundation-docs", "gulp": "^3.8.10", + "gulp-add-src": "^0.2.0", "gulp-autoprefixer": "^2.3.1", "gulp-babel": "^6.1.1", "gulp-cache-bust": "^1.0.2", From df3943ab6409cee9eaf99a7598c92bad52683420 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 28 Mar 2016 13:20:00 -0700 Subject: [PATCH 18/21] Remove util-map.json, the functionality of which is now covered by customizer/config.yml --- lib/util-map.json | 88 ----------------------------------------------- 1 file changed, 88 deletions(-) delete mode 100644 lib/util-map.json diff --git a/lib/util-map.json b/lib/util-map.json deleted file mode 100644 index b181491432..0000000000 --- a/lib/util-map.json +++ /dev/null @@ -1,88 +0,0 @@ -{ - "accordion": [ - "foundation.util.keyboard.js", - "foundation.util.motion.js" - ], - "accordionMenu": [ - "foundation.util.keyboard.js", - "foundation.util.motion.js", - "foundation.util.nest.js" - ], - "drilldown": [ - "foundation.util.keyboard.js", - "foundation.util.motion.js", - "foundation.util.nest.js" - ], - "dropdownMenu": [ - "foundation.util.keyboard.js", - "foundation.util.motion.js", - "foundation.util.box.js", - "foundation.util.nest.js" - ], - "dropdown": [ - "foundation.util.keyboard.js", - "foundation.util.box.js", - "foundation.util.triggers.js" - ], - "interchange": [ - "foundation.util.triggers.js", - "foundation.util.timerAndImageLoader.js" - ], - "magellan": [ - "foundation.util.motion.js" - ], - "offcanvas": [ - "foundation.util.mediaQuery.js", - "foundation.util.motion.js", - "foundation.util.triggers.js" - ], - "orbit": [ - "foundation.util.motion.js", - "foundation.util.timerAndImageLoader.js", - "foundation.util.keyboard.js", - "foundation.util.touch.js" - ], - "responsiveMenu": [ - "foundation.util.triggers.js", - "foundation.util.mediaQuery.js", - "foundation.accordionMenu.js", - "foundation.drilldown.js", - "foundation.dropdownMenu.js", - "foundation.util.nest.js" - ], - "responsiveToggle": [ - "foundation.util.mediaQuery.js" - ], - "reveal": [ - "foundation.util.box.js", - "foundation.util.motion.js", - "foundation.util.triggers.js", - "foundation.util.mediaQuery.js" - ], - "slider": [ - "foundation.util.triggers.js", - "foundation.util.motion.js", - "foundation.util.keyboard.js", - "foundation.util.touch.js" - ], - "sticky": [ - "foundation.util.triggers.js", - "foundation.util.mediaQuery.js" - ], - "tabs": [ - "foundation.util.keyboard.js", - "foundation.util.timerAndImageLoader.js" - ], - "toggler": [ - "foundation.util.motion.js" - ], - "tooltip": [ - "foundation.util.box.js", - "foundation.util.triggers.js", - "foundation.util.mediaQuery.js", - "foundation.util.motion.js" - ], - "motion-ui": [ - "foundation.util.motion.js" - ] -} From 13d11e7065d4a64642106fc5d7a779c9c3d1ca81 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 28 Mar 2016 13:33:30 -0700 Subject: [PATCH 19/21] In customizer Gulpfile, ensure color variables passed in are all merged into $foundation-palette --- customizer/complete.json | 5 ++++- customizer/lib/sass.js | 31 +++++++++++++++++++++++++------ 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/customizer/complete.json b/customizer/complete.json index d986cb840a..3ec9134cf5 100644 --- a/customizer/complete.json +++ b/customizer/complete.json @@ -43,5 +43,8 @@ "visibility", "float" ], - "variables": {} + "variables": { + "primary-color": "#2199e8", + "alert-color": "#ec5840" + } } diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index 96b2760bec..74c09c4d85 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -1,6 +1,6 @@ var empty = require('is-empty-object'); var format = require('util').format; -var multiline = require('multiline'); +var multiline = require('multiline').stripIndent; var SASS_TEMPLATE = multiline(function() {/* @charset 'utf-8'; @@ -28,8 +28,8 @@ var SASS_TEMPLATE = multiline(function() {/* * @returns {String} Formatted Sass file. */ module.exports = function(config, modules, variables) { - var CONFIG = config; var variableList = []; + var colorList = {}; var exportList = ['@include foundation-global-styles;']; if (empty(modules)) { @@ -39,17 +39,36 @@ module.exports = function(config, modules, variables) { // Create variable overrides code for (var i in variables) { var name = i.replace('_', '-'); - variableList.push(format('$%s: %s;', name, variables[i])); + if (name.match(/-color$/)) { + var key = name.replace('-color', ''); + colorList[key] = variables[i]; + } + else { + variableList.push(format('$%s: %s;', name, variables[i])); + } } + variableList.push(createPaletteMap(colorList)); + // Create module exports with @include for (var i in modules) { var name = modules[i]; - if (CONFIG[name] && CONFIG[name].sass) { - exportList.push(format('@include foundation-%s;', CONFIG[name].sass)); + if (config[name] && config[name].sass) { + exportList.push(format('@include foundation-%s;', config[name].sass)); } } - return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n ')) + return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n')) +} + +function createPaletteMap(colors) { + var output = '$foundation-palette: (%s\n);'; + var keys = ''; + + for (var i in colors) { + keys += format('\n %s: %s,', i, colors[i]); + } + + return format(output, keys); } From 266378bbbf941ce5d51bc16c722e75f0c3c89d35 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 29 Mar 2016 09:32:54 -0700 Subject: [PATCH 20/21] In customizer Gulp tasks, don't print a $foundation-palette override if no color variables are included in the custom build definition --- customizer/complete.json | 6 +----- customizer/lib/sass.js | 4 +++- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/customizer/complete.json b/customizer/complete.json index 3ec9134cf5..9244c56190 100644 --- a/customizer/complete.json +++ b/customizer/complete.json @@ -42,9 +42,5 @@ "top_bar", "visibility", "float" - ], - "variables": { - "primary-color": "#2199e8", - "alert-color": "#ec5840" - } + ] } diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js index 74c09c4d85..1df0a10712 100644 --- a/customizer/lib/sass.js +++ b/customizer/lib/sass.js @@ -48,7 +48,9 @@ module.exports = function(config, modules, variables) { } } - variableList.push(createPaletteMap(colorList)); + if (!empty(colorList)) { + variableList.push(createPaletteMap(colorList)); + } // Create module exports with @include for (var i in modules) { From 02711b766e7bac5ecdfdcbc26417cb3256e8e897 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 29 Mar 2016 15:24:38 -0700 Subject: [PATCH 21/21] In customizer Gulp tasks, prevent build from failing if the form data JSON given is missing the variables key --- gulp/customizer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulp/customizer.js b/gulp/customizer.js index 5a7e4d3060..e033244b58 100644 --- a/gulp/customizer.js +++ b/gulp/customizer.js @@ -35,7 +35,7 @@ gulp.task('customizer:loadConfig', function(done) { CUSTOMIZER_CONFIG = yaml(data.toString()); MODULE_LIST = moduleList.modules; - VARIABLE_LIST = moduleList.variables; + VARIABLE_LIST = moduleList.variables || {}; done(); }); });