Add sass-glob

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{*.json,*.yml}]
+indent_size = 2
+indent_style = space

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.sass-cache
+bower_components

.jshintrc

@@ -0,0 +1,22 @@
+{
+    "boss": true,
+    "browser": true,
+    "curly": true,
+    "debug": true,
+    "devel": true,
+    "eqeqeq": true,
+    "expr": true,
+    "forin": true,
+    "immed": true,
+    "noarg": true,
+    "node": true,
+    "noempty": true,
+    "nonew": true,
+    "strict": true,
+    "trailing": true,
+    "undef": true,
+    "unused": true,
+    "predef": [
+        "Prism"
+    ]
+}

LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2014 Resource LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,31 @@
+<p align="center">
+  <img src="http://fbrctr.github.io/assets/toolkit/images/masthead.png" width="243">
+</p>
+
+This is the [Fabricator](https://github.com/fbrctr/fabricator) instance used to build [http://fbrctr.github.io](http://fbrctr.github.io).
+
+## Development
+
+Checkout the `fabricator` branch:
+
+```
+$ git checkout fabricator
+```
+
+Start local dev server:
+
+```
+$ npm start
+```
+
+Build for release:
+
+```
+$ npm run build
+```
+
+Publish:
+
+```
+$ git subtree push --prefix dist origin master
+```

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "fbrctr.github.io",
+  "version": "0.0.0",
+  "homepage": "https://github.com/fbrctr/fbrctr.github.io",
+  "authors": [
+    "Luke Askew <[email protected]>"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "neat": "~1.7.2",
+    "css-utils": "~0.1.4"
+  }
+}

building-a-toolkit/assets.html → dist/building-a-toolkit/assets.html

@@ -104,7 +104,7 @@ <h1 id="stylesheets-and-javascript"><a name="stylesheets-and-javascript" class="
 <p>How to work with CSS and JS within Fabricator</p>
 </blockquote>
 <p>Fabricator comes with little opinion about how you should architect your Stylesheets and JavaScript. Each use case is different, so it's up to you to define what works best.</p>
-<p>Out of the box, you'll find a single <code>.scss</code> and <code>.js</code> file. These are the entry points for Sass compilation and Browserify respectively. It is recommended that you leverage the module importing features of each preprocessor to compile your toolkit down to a single <code>.css</code> and <code>.js</code> file. Practically speaking, you should be able to drop these two files into any application and have full access to your entire toolkit.</p>
+<p>Out of the box, you'll find a single <code>.scss</code> and <code>.js</code> file. These are the entry points for Sass compilation and Webpack respectively. It is recommended that you leverage the module importing features of each preprocessor to compile your toolkit down to a single <code>.css</code> and <code>.js</code> file. Practically speaking, you should be able to drop these two files into any application and have full access to your entire toolkit.</p>
 
 		</div>
 	</div>

getting-started/what-is-a-toolkit.html → dist/getting-started/what-is-a-toolkit.html

@@ -113,7 +113,7 @@ <h2 id="toolkit-driven-development"><a name="toolkit-driven-development" class="
 <p>When done well, a mature toolkit can be used to build a large number of unique pages and layouts. Once a baseline of materials has been built, designers can compose new pages by selecting existing materials, then design to fill the gaps. The need to produce a layout artifact for each new page is eliminated. The time it takes to layout new pages dramatically decreases as the toolkit matures.</p>
 <h2 id="style-guide-vs-toolkit"><a name="style-guide-vs-toolkit" class="" href="#style-guide-vs-toolkit">Style guide vs toolkit</a></h2>
 <p>Website style guides have evolved over the years, first starting as an outreach of the tradition (print) branding style guides, and eventually maturing into interactive examples of how a brand should be look and feel on the web. See <a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks</a>, <a href="http://www.yelp.com/styleguide">Yelp</a>, <a href="http://sfdc-styleguide.herokuapp.com/">Salesforce</a>, <a href="http://style.codeforamerica.org">Code For America</a>, and <a href="http://www.google.com/design/spec/material-design/">Google's Material Design</a>.</p>
-<p>A toolkit is more focused on code - specifically the modularity of website interfaces. Toolkits break down websites into small, repeatable chunks, then use those chunks to build an infinite number of layouts. <a href="http://getbootstrap.com/">Twitter Bootstrap</a>, <a href="http://topcoat.io/topcoat/">Topcoat</a>, and <a href="http://foundation.zurb.com/">Zurb's Foundation</a> are popular toolkits.</p>
+<p>A toolkit is more focused on code - specifically the modularity of website interfaces. Toolkits break down websites into small, repeatable chunks, then use those chunks to build an infinite number of layouts. <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://topcoat.io/topcoat/">Topcoat</a>, and <a href="http://foundation.zurb.com/">Zurb's Foundation</a> are popular toolkits.</p>
 <p>Both are great and can be extremely useful. Fabricator gives you a way to combine both concepts into one deliverable.</p>
 <p>When you work with Fabricator, you develop a brand's look and feel on the web while also producing a code toolkit.</p>
 <p>Next, <a href="/getting-started/working-with-fabricator.html">learn how to use Fabricator</a>.</p>

index.html → dist/index.html

@@ -87,6 +87,23 @@ <h3 class="white">Rapid Prototyping</h3>
 	</div>
 </div>
 
+<div class="bg-grey1 pt-s pb-xl">
+	<div class="row ta-c">
+		<h3 class="blue">Featured In</h3>
+	</div>
+	<div class="row ta-c feature-row">
+		<a href="http://alistapart.com/blog/post/style-guide-generator-roundup" target="_blank">
+			<img src="/assets/toolkit/images/alistapart.png" alt="A List Apart">
+		</a>
+		<a href="http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/" target="_blank">
+			<img src="/assets/toolkit/images/smashing-magazine.png" alt="Smashing Magazine">
+		</a>
+		<a href="https://twitter.com/barrymcgee/status/618807894138601472" target="_blank">
+			<img src="/assets/toolkit/images/net-magazine.png" alt="Net Magazine">
+		</a>
+	</div>
+</div>
+
 <div class="row pb-xl">
 	<div class="ta-c">
 		<h2>Quick Start</h2>

gulpfile.js

@@ -0,0 +1,204 @@
+'use strict';
+
+// modules
+var assemble = require('fabricator-assemble');
+var browserify = require('browserify');
+var browserSync = require('browser-sync');
+var concat = require('gulp-concat');
+var csso = require('gulp-csso');
+var del = require('del');
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var gulpif = require('gulp-if');
+var imagemin = require('gulp-imagemin');
+var prefix = require('gulp-autoprefixer');
+var rename = require('gulp-rename');
+var reload = browserSync.reload;
+var runSequence = require('run-sequence');
+var sass = require('gulp-sass');
+var source = require('vinyl-source-stream');
+var streamqueue = require('streamqueue');
+var streamify = require('gulp-streamify');
+var uglify = require('gulp-uglify');
+
+
+// configuration
+var config = {
+	dev: gutil.env.dev,
+	src: {
+		scripts: {
+			fabricator: [
+				'src/assets/fabricator/scripts/prism.js',
+				'src/assets/fabricator/scripts/fabricator.js'
+			],
+			vendor: [
+				'src/assets/fabricator/scripts/prism.js'
+			],
+			toolkit: './src/assets/toolkit/scripts/toolkit.js'
+		},
+		styles: {
+			fabricator: 'src/assets/fabricator/styles/fabricator.scss',
+			toolkit: 'src/assets/toolkit/styles/toolkit.scss'
+		},
+		images: 'src/assets/toolkit/images/**/*',
+		views: 'src/toolkit/views/*.html'
+	},
+	dest: 'dist'
+};
+
+
+// clean
+gulp.task('clean', function (cb) {
+	del(['**'], { ignore: 'demo/**', cwd: config.dest }, cb);
+});
+
+
+// styles
+gulp.task('styles:fabricator', function () {
+	return gulp.src(config.src.styles.fabricator)
+		.pipe(sass({
+			errLogToConsole: true
+		}))
+		.pipe(prefix('last 1 version'))
+		.pipe(gulpif(!config.dev, csso()))
+		.pipe(rename('f.css'))
+		.pipe(gulp.dest(config.dest + '/assets/fabricator/styles'))
+		.pipe(gulpif(config.dev, reload({stream:true})));
+});
+
+gulp.task('styles:toolkit', function () {
+	return gulp.src(config.src.styles.toolkit)
+		.pipe(sass({
+			errLogToConsole: true
+		}))
+		.pipe(prefix('last 1 version'))
+		.pipe(gulpif(!config.dev, csso()))
+		.pipe(gulp.dest(config.dest + '/assets/toolkit/styles'))
+		.pipe(gulpif(config.dev, reload({stream:true})));
+});
+
+gulp.task('styles', ['styles:fabricator', 'styles:toolkit']);
+
+
+// scripts
+gulp.task('scripts:fabricator', function () {
+	return gulp.src(config.src.scripts.fabricator)
+		.pipe(concat('f.js'))
+		.pipe(gulpif(!config.dev, uglify()))
+		.pipe(gulp.dest(config.dest + '/assets/fabricator/scripts'));
+});
+
+gulp.task('scripts:toolkit', function() {
+
+	var toolkit = function() {
+		return browserify(config.src.scripts.toolkit).bundle()
+			.on('error', function(error) {
+				gutil.log(gutil.colors.red(error));
+				this.emit('end');
+			})
+			.pipe(source('toolkit.js'));
+	};
+
+	var vendor = function() {
+		return gulp.src(config.src.scripts.vendor)
+			.pipe(concat('vendor.js'));
+	};
+
+	return streamqueue({
+			objectMode: true
+		}, vendor(), toolkit())
+		.pipe(streamify(concat('toolkit.js')))
+		.pipe(gulpif(!config.dev, streamify(uglify())))
+		.pipe(gulp.dest(config.dest + '/assets/toolkit/scripts'));
+
+});
+
+gulp.task('scripts', ['scripts:fabricator', 'scripts:toolkit']);
+
+
+// images
+gulp.task('images', ['favicon'], function () {
+	return gulp.src(config.src.images)
+		.pipe(imagemin())
+		.pipe(gulp.dest(config.dest + '/assets/toolkit/images'));
+});
+
+gulp.task('favicon', function () {
+	return gulp.src('./src/favicon.ico')
+		.pipe(gulp.dest(config.dest));
+});
+
+
+// assemble
+gulp.task('assemble', function(done) {
+	assemble({
+		helpers: {
+			markdown: function (str, opts) {
+				if (typeof str === 'object') {
+					opts = str;
+					str = null;
+				}
+				str = str || opts.fn(this);
+				return require('markdown-it')()
+					.use(require('markdown-it-headinganchor'), {
+						linkify: true,
+						anchorClass: '',
+						slugify: function(str) {
+							return require('string')(str).slugify().s;
+						}
+					})
+					.render(str);
+			},
+			decode: function (val) {
+				return decodeURIComponent(val);
+			},
+			raw: function (options) {
+				return options.fn();
+			}
+		}
+	});
+	done();
+});
+
+
+// server
+gulp.task('serve', function () {
+
+	var reload = browserSync.reload;
+
+	browserSync({
+		server: {
+			baseDir: config.dest
+		},
+		notify: false,
+		logPrefix: 'FABRICATOR'
+	});
+
+	gulp.watch('src/**/*.{html,md,json,yml}', ['assemble']).on('change', reload);
+	gulp.watch('src/assets/fabricator/styles/**/*.scss', ['styles:fabricator']);
+	gulp.watch('src/assets/toolkit/styles/**/*.scss', ['styles:toolkit']);
+	gulp.watch('src/assets/fabricator/scripts/**/*.js', ['scripts:fabricator']).on('change', reload);
+	gulp.watch('src/assets/toolkit/scripts/**/*.js', ['scripts:toolkit']).on('change', reload);
+	gulp.watch(config.src.images, ['images']).on('change', reload);
+});
+
+
+// default build task
+gulp.task('default', ['clean'], function () {
+
+	// define build tasks
+	var tasks = [
+		'styles',
+		'scripts',
+		'images',
+		'assemble'
+	];
+
+	// run build
+	runSequence(tasks, function () {
+		if (config.dev) {
+			gulp.start('serve');
+		}
+	});
+
+});