The objective of this boilerplate is to provide a quick jumping-off point to start developing standalone UI components and prototypes.
The project uses @zoubin's
gulp-watchify-factor-bundleto abstract the process of transforming browserify entries that get split off from the common browserify bundle task by the
factor-bundle plugin. (Unfortunately, using
watchify hasn't worked for me yet using this implementation, so Gulp will rebundle everything using a regular
factor-bundle checks all entries defined in the browserify config and bundles any modules that are shared between these entries into a
The boilerplate assumes you'll be developing UI components and templates to display them (in isolation, and alongside other components to form mockups of complete pages.
In your HTML, include
common.js, then include a main
app.js file which will check for the presence of these components on the page and asynchronously load their associated functionality with the
scriptjs module (it's handles dependencies better than jQuery's
(Another approach to the currently-implemented pattern is to use
partition-bundle, which is similar to
factor-bundle, but it differs because it can dynamically include external scripts using
require() and a defined module name determined at build-time. The components could be written as CommonJS modules instead of being exposed globally after being loaded. Unfortunately, the documentation is sparse and I decided against using
partition-bundle for the time being. Sorry I've polluted the global scope.)
The recommended naming convention for components is borrowed from @necolas, and is a modification of traditional BEM syntax:
.Component .Component--modifier .Component-child .Component-child--modifier
Along with the following classes to control appearance, state, and event bindings that can be added to any block or element:
.u-utility-name .is-state .js-behaviour-hook
Generally, the thoughts summed up in this wonderful article should guide your CSS authoring.
Scut (Sass-CSS Utitilies) is included, which eases CSS development by providing a solid collection of mixins to take care of common CSS patterns. Scut can be easily removed by uninstalling the Bower package (but I've found it to be invaluable).
index.jade file is where you can display a list of all your components or pages, so that other developers can preview them.
Gulp takes care of some Jade-related things for us:
- Adds all files found in the
html/mixinsdirectory to an
html/_mixins.jadefile, so you can keep your mixins separated, but only include one file in your base layout to access them all.
- After generating your
includecomponents, adds a line to extend the default jade layout to the top of the component templates, so that the generated HTML yields a standalone page with all the required scaffolding.
Build, watch, spin up a dev server on port 9001
Build without any optimizations
$ gulp build
Build to production environment
$ gulp build --deploy
MIT License © Jon Scott Clark
MIT License © Bin Zou