Merge pull request #56 from LukeAskew/master

Various fixes; update to 0.4.0

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+public
 .sass-cache
 src/fabricator/css
 src/toolkit/assets/css

gulpfile.js

@@ -27,19 +27,25 @@ var config = {
 	src: {
 		scripts: {
 			fabricator: [
-				'./src/fabricator/js/prism.js',
-				'./src/fabricator/js/fabricator.js'
+				'./src/fabricator/scripts/prism.js',
+				'./src/fabricator/scripts/fabricator.js'
 			],
-			toolkit: './src/toolkit/assets/js/toolkit.js'
+			toolkit: './src/toolkit/assets/scripts/toolkit.js'
 		},
 		styles: {
-			fabricator: './src/fabricator/scss/fabricator.scss',
-			toolkit: './src/toolkit/assets/scss/toolkit.scss'
+			fabricator: './src/fabricator/styles/fabricator.scss',
+			toolkit: './src/toolkit/assets/styles/toolkit.scss'
 		},
-		images: './src/toolkit/assets/img/**/*',
-		templates: './src/toolkit/views/*.html'
+		images: './src/toolkit/assets/images/**/*',
+		templates: './src/toolkit/views/*.html',
+		materials: [
+			'components',
+			'structures',
+			'prototypes',
+			'documentation'
+		]
 	},
-	dest: './dist'
+	dest: './public'
 };
 
 
@@ -62,7 +68,7 @@ gulp.task('styles:fabricator', function () {
 		.pipe(prefix('last 1 version'))
 		.pipe(gulpif(!config.dev, csso()))
 		.pipe(rename('f.css'))
-		.pipe(gulp.dest(config.dest + '/assets/css'))
+		.pipe(gulp.dest(config.dest + '/fabricator/styles'))
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
@@ -74,7 +80,7 @@ gulp.task('styles:toolkit', function () {
 		}))
 		.pipe(prefix('last 1 version'))
 		.pipe(gulpif(!config.dev, csso()))
-		.pipe(gulp.dest(config.dest + '/toolkit/css'))
+		.pipe(gulp.dest(config.dest + '/toolkit/styles'))
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
@@ -87,7 +93,7 @@ gulp.task('scripts:fabricator', function () {
 		.pipe(plumber())
 		.pipe(concat('f.js'))
 		.pipe(gulpif(!config.dev, uglify()))
-		.pipe(gulp.dest(config.dest + '/assets/js'))
+		.pipe(gulp.dest(config.dest + '/fabricator/scripts'))
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
@@ -96,21 +102,26 @@ gulp.task('scripts:toolkit', function () {
 		.pipe(plumber())
 		.pipe(source('toolkit.js'))
 		.pipe(gulpif(!config.dev, streamify(uglify())))
-		.pipe(gulp.dest(config.dest + '/toolkit/js'))
+		.pipe(gulp.dest(config.dest + '/toolkit/scripts'))
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
 gulp.task('scripts', ['scripts:fabricator', 'scripts:toolkit']);
 
 
 // images
-gulp.task('images', function () {
+gulp.task('images', ['favicon'], function () {
 	return gulp.src(config.src.images)
 		.pipe(imagemin())
-		.pipe(gulp.dest(config.dest + '/toolkit/img'))
+		.pipe(gulp.dest(config.dest + '/toolkit/images'))
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
+gulp.task('favicon', function () {
+	return gulp.src('./src/favicon.ico')
+		.pipe(gulp.dest(config.dest));
+});
+
 
 // collate
 gulp.task('collate', function () {
@@ -121,13 +132,8 @@ gulp.task('collate', function () {
 	var deferred = Q.defer();
 
 	var opts = {
-		materials: [
-			'components',
-			'structures',
-			'prototypes',
-			'documentation'
-		],
-		dest: config.dest + '/assets/json/data.json'
+		materials: config.src.materials,
+		dest: config.dest + '/fabricator/data/data.json'
 	};
 
 	// run the collate task; resolve deferred when complete
@@ -138,9 +144,10 @@ gulp.task('collate', function () {
 });
 
 // templates
-gulp.task('template', ['collate'], function () {
+gulp.task('template', function () {
 	var opts = {
-		data: config.dest + '/assets/json/data.json'
+		data: config.dest + '/fabricator/data/data.json',
+		prototype: false
 	};
 
 	return gulp.src(config.src.templates)
@@ -149,31 +156,42 @@ gulp.task('template', ['collate'], function () {
 		.pipe(gulpif(config.dev, connect.reload()));
 });
 
+gulp.task('prototypes', function () {
+	var opts = {
+		data: config.dest + '/fabricator/data/data.json',
+		prototype: true
+	};
+	return gulp.src('./src/toolkit/prototypes/*.html')
+		.pipe(template(opts))
+		.pipe(gulp.dest(config.dest + '/prototypes'));
+});
+
+gulp.task('templates', ['collate'], function () {
+	gulp.start('template', 'prototypes');
+});
+
 
 // build
 gulp.task('build', ['clean'], function () {
-	gulp.start('styles', 'scripts', 'images', 'template');
+	gulp.start('styles', 'scripts', 'images', 'templates');
 });
 
 
 // server
 gulp.task('connect', connect.server({
 	root: [config.dest],
 	port: 9000,
-	livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false,
-	open: {
-		file: ''
-	}
+	livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false
 }));
 
 
 // watch
 gulp.task('watch', ['connect'], function () {
-	gulp.watch('./src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['template']);
-	gulp.watch('./src/fabricator/scss/**/*.scss', ['styles:fabricator']);
-	gulp.watch('./src/toolkit/assets/scss/**/*.scss', ['styles:toolkit']);
-	gulp.watch('./src/fabricator/js/**/*.js', ['scripts:fabricator']);
-	gulp.watch('./src/toolkit/assets/js/**/*.js', ['scripts:toolkit']);
+	gulp.watch('./src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['templates']);
+	gulp.watch('./src/fabricator/styles/**/*.scss', ['styles:fabricator']);
+	gulp.watch('./src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
+	gulp.watch('./src/fabricator/scripts/**/*.js', ['scripts:fabricator']);
+	gulp.watch('./src/toolkit/assets/scripts/**/*.js', ['scripts:toolkit']);
 });
 
 

package.json

@@ -1,9 +1,8 @@
 {
   "name": "fabricator",
-  "version": "0.3.0",
-  "description": "A tool for creating modular websites",
+  "version": "0.4.0",
+  "description": "Fabricator is a tool for creating modular website toolkits",
   "homepage": "http://resource.github.io/fabricator/",
-  "private": true,
   "main": "README.md",
   "scripts": {
     "dev": "npm install && gulp dev",
@@ -30,32 +29,33 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "gulp": "~3.8.5"
+  },
   "devDependencies": {
-    "marked": "~0.2.9",
+    "marked": "~0.2.10",
     "mkdirp": "~0.3.5",
     "handlebars": "~1.3.0",
     "cheerio": "~0.13.1",
-    "change-case": "~1.0.4",
+    "change-case": "~1.0.6",
     "js-beautify": "~1.4.2",
     "mkpath": "~0.1.0",
-    "gulp-util": "~2.2.14",
+    "gulp-util": "~2.2.19",
     "gulp-uglify": "~0.2.1",
     "gulp-jshint": "~1.3.4",
     "gulp-autoprefixer": "0.0.6",
     "gulp-imagemin": "~0.2.0",
-    "gulp-connect": "~1.0.7",
+    "gulp-connect": "~1.0.10",
     "gulp-csso": "~0.2.6",
     "gulp-serve": "~0.1.1",
     "gulp-clean": "~0.2.4",
-    "gulp-sass": "~0.7.1",
-    "through2": "~0.4.1",
+    "gulp-sass": "~0.7.2",
+    "through2": "~0.4.2",
     "gulp-plumber": "~0.5.6",
     "vinyl-map": "~1.0.0",
     "gulp-concat": "~2.1.7",
     "gulp-rename": "~1.0.0",
     "gulp-if": "0.0.5",
-    "gulp": "~3.5.5",
     "q": "~1.0.1",
     "vinyl-source-stream": "~0.1.1",
     "browserify": "~3.38.1",

src/fabricator/js/fabricator.js → src/fabricator/scripts/fabricator.js

@@ -26,10 +26,10 @@ fabricator.test = {};
 
 // test for localstorage
 fabricator.test.localStorage = (function () {
-	var mod = "fabricator";
+	var test = "_f";
 	try {
-		localStorage.setItem(mod, mod);
-		localStorage.removeItem(mod);
+		localStorage.setItem(test, test);
+		localStorage.removeItem(test);
 		return true;
 	} catch(e) {
 		return false;
@@ -49,35 +49,7 @@ if (fabricator.test.localStorage) {
 fabricator.dom = {
 	primaryMenu: document.querySelector(".f-menu"),
 	menuItems: document.querySelectorAll(".f-menu li a"),
-	menuToggle: document.querySelector(".f-menu-toggle"),
-	prototype: document.getElementById("prototype")
-};
-
-
-/**
- * AJAX call for JSON
- * @param  {Function} callback
- * @return {Object} fabricator
- */
-fabricator.getData = function (callback) {
-
-	var url = "assets/json/data.json",
-		data;
-
-	// get data
-	var getData = new XMLHttpRequest();
-	getData.open("GET", url, false);
-	getData.send();
-
-	data = JSON.parse(getData.responseText);
-
-	// send data to callback
-	if (typeof callback === "function") {
-		callback(data);
-	}
-
-	return this;
-
+	menuToggle: document.querySelector(".f-menu-toggle")
 };
 
 
@@ -169,31 +141,6 @@ fabricator.setActiveItem = function () {
 };
 
 
-/**
- * Inject prototype content into page
- * @param  {String} id prototype identifier
- * @return {Object} fabricator
- */
-fabricator.templatePrototype = function (id) {
-
-	var content;
-
-	// get data
-	this.getData(function (data) {
-		for (var i = data.prototypes.length - 1; i >= 0; i--) {
-			if (data.prototypes[i].id === id) {
-				content = data.prototypes[i].content;
-				fabricator.dom.prototype.innerHTML = content;
-			}
-		}
-
-	});
-
-	return this;
-
-};
-
-
 /**
  * Click handler to primary menu toggle
  * @return {Object} fabricator
@@ -338,12 +285,7 @@ fabricator.singleItemCodeToggle = function () {
 		.buildColorChips()
 		.setActiveItem();
 
-	// if prototype page, template accordingly
-	if (fabricator.dom.prototype && location.hash) {
-		fabricator.templatePrototype(location.hash.replace(/#/, ""));
-	}
-
 	// syntax highlighting
 	Prism.highlightAll();
 
-}());
+}());

src/fabricator/scss/partials/_item.scss → src/fabricator/styles/partials/_item.scss

@@ -1,19 +1,23 @@
 /* item */
 .f-item-group {
-	@include clearfix;
 	margin-bottom: 2em;
+	line-height: 1;
 }
 
 .f-item-heading-group {
+	@include clearfix;
 	margin-bottom: 0.5em;
 	padding: 0.5em 0;
 	border-bottom: 1px solid $color--light;
 	color: $color--medium;
+	vertical-align: middle;
 	.f-item-heading {
 		font-size: 0.75em;
+		display: inline-block;
 	}
 	.f-item-toggles {
 		float: right;
+		display: inline-block;
 	}
 	.f-toggle {
 		margin-left: 0.2em;

src/toolkit/assets/scss/toolkit.scss → src/toolkit/assets/styles/toolkit.scss

@@ -4,4 +4,4 @@
 
 body {
 	font-family: sans-serif;
-}
+}

src/toolkit/views/partials/intro.html

@@ -7,14 +7,14 @@
 
 	<title>Toolkit</title>
 
-	<!-- fabricator styles -->
-	<link rel="stylesheet" href="assets/css/f.css">
-	<!-- /fabricator styles -->
+	{{#if fabricator}}<!-- fabricator styles -->
+	<link rel="stylesheet" href="{{pathBase}}fabricator/styles/f.css">
+	<!-- /fabricator styles -->{{/if}}
 
 
 	<!-- toolkit styles -->
-	<link rel="stylesheet" href="toolkit/css/toolkit.css">
+	<link rel="stylesheet" href="{{pathBase}}toolkit/styles/toolkit.css">
 	<!-- /toolkit styles -->
 
 </head>
-<body>
+<body>

src/toolkit/views/partials/menu.html

@@ -34,7 +34,7 @@
 			<ul>
 				{{#each prototypes}}
 					<li>
-						<a href="prototypes.html#{{id}}" target="_blank">{{name}}</a>
+						<a href="prototypes/{{id}}.html" target="_blank">{{name}}</a>
 					</li>
 				{{/each}}
 			</ul>