gulp integration

.gitignore

@@ -1,3 +1,2 @@
 .sass-cache/*
-node_modules/*
-css/example.css
+node_modules/*

Gruntfile.js

@@ -1,37 +0,0 @@
-module.exports = function(grunt) {
- 
-  grunt.initConfig({
-    imagemin: {
-      dynamic: {
-        files: [{
-          expand: true,
-          cwd: 'img/',
-          src: ['*.{png,jpg,gif}'],
-          dest: 'img/'
-        }]
-      }
-    },
-    sass: {
-      dist: {
-        options: {
-          style: 'compressed'
-        },
-        files: { 'style.css': 'css/style.scss' }
-      }
-    },
-    watch: {
-      css: {
-        files: ['css/*.scss', 'css/*/*.scss'],
-        tasks: ['sass']
-      }
-    }
-  });
- 
- 
-  grunt.loadNpmTasks('grunt-contrib-imagemin');
-  grunt.loadNpmTasks('grunt-contrib-sass');
-  grunt.loadNpmTasks('grunt-contrib-watch');
- 
-  grunt.registerTask('default', ['imagemin', 'sass', 'watch']);
- 
-};

README.md

@@ -1,33 +1,34 @@
 # barebones
 
-A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. Great as a starting point with powerful features to encourage rapid development for most projects.
+A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. There's lots of these out there but most themes include lots of bloat and files which you might not necessarily need, so I thought I'd create my own which is great as a starting point with powerful features to encourage rapid development for most projects.
 
 ## Features
 
 * Reset, normalisation and base font/form styles
-* Adaptive at certain breakpoints and responsive through the middle
 * Sass powered - semantically named files all compiled into a single file
 * Semantic use of HTML5 elements, includes Google HTML5 shiv
 * WAI-ARIA role ready
-* Proprietary baseline and customisable, Sass generated horizontal grid
+* Proprietary baseline and customisable, Sass generated, responsive horizontal grid
 * Comes pre-bundled with cached CDN version of jQuery
 * jQuery plugin agnostic
 * Basic index.php Loop template
 * Customised functions.php adding theme support for high customisation
 * Minimised HTTP requests for high Web Performance
 * Localised strings for multiple language support
-* Grunt.js integration - automatic image optimisation, Sass compiling and watching, and css minification
+* Gulp.js integration - automatic image optimisation, Sass compiling and watching, and css minification
 
 ## Installation
 
 ### Dependencies
 
 * Node.js
-* Grunt.js
+* Gulp.js
 
-Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory, then open /barebones/ in the command line and run `npm install` to install all of Grunt's dependancies.
+Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory, then open /barebones/ in a command line tool, such as Mac Terminal, and run the following to install all of this project's Gulp dependencies:
 
-Then run `grunt` to watch your Sass files.
+    npm install gulp-concat gulp-jshint gulp-imagemin gulp-rename gulp-sass gulp-uglify --save-dev
+
+Then run `gulp` to run all your Gulp tasks. This includes watching the Sass folders.
 
 ## WordPress Support
 
@@ -35,7 +36,7 @@ Compatible with WordPress 3.2 and above.
 
 ## Browser Support
 
-* Internet Explorer 7.0+
+* Internet Explorer 8.0+
 * Firefox 3.0+
 * Safari 4.0+
 * Chrome 14.0+
@@ -44,5 +45,5 @@ Compatible with WordPress 3.2 and above.
 
 ## Roadmap
 
-* Phase out Internet Explorer 7 support
-* Refactor CSS using `box-sizing: border-box`
+* ~~Phase out Internet Explorer 7 support~~
+* ~~Refactor CSS using `box-sizing: border-box`~~

all.js

@@ -0,0 +1,5 @@
+;(function($) {
+
+  
+
+})(jQuery);

all.min.js

@@ -0,0 +1 @@
+!function(){}(jQuery),!function(){}(jQuery),function(){}(jQuery);

css/_vars.scss

@@ -8,13 +8,6 @@ $base-font-size: 						16;
 $base-line-height: 					1.5;
 $base-margin-bottom: 				$base-font-size * $base-line-height;
 
-$h1-font-size: 							28;
-$h2-font-size: 							24;
-$h3-font-size: 							21;
-$h4-font-size: 							18;
-$h5-font-size: 							16;
-$h6-font-size: 							16;
-
 // Media Queries
 
 $mobile:                    640px;
@@ -25,10 +18,4 @@ $container-max-width: 			960;
 $column-count:				 			12;
 $column-gutter:				 			20;
 
-// Forms
-$input-border: 							solid 1px #ccc;
-$input-background:					#fff;
-$btn-border:								solid 1px #ccc;
-$btn-background:						#eee;
-$btn-background-hover:			#ddd;
-$btn-color:									#333;
+// Custom colours etc.

css/generic/_normalise.scss

@@ -13,30 +13,6 @@ h1, h2, h3, h4, h5, h6, p, ul, ol {
 	margin-bottom: $base-margin-bottom * 1px;
 }
 
-h1 {
-	@include font-size($h1-font-size);
-}
-
-h2 {
-	@include font-size($h2-font-size);
-}
-
-h3 {
-	@include font-size($h3-font-size);
-}
-
-h4 {
-	@include font-size($h4-font-size);
-}
-
-h5 {
-	@include font-size($h5-font-size);
-}
-
-h6 {
-	@include font-size($h6-font-size);
-}
-
 ul, ol {
 	margin-left: $base-margin-bottom * 1px;
 }
@@ -47,6 +23,6 @@ ul ul, ol ol {
 
 img {
 	display: block;
-	max-width: 100%;
 	height: auto;
+	max-width: 100%;
 }

css/generic/_utilities.scss

@@ -21,11 +21,11 @@ img.alignright {
 }
 
 .clearfix {
-	*zoom:1;
 	&:before,
 	&:after{
-		content: " ";
+		content: '';
 		display: table;
+		line-height: 0;
 	}
 	&:after{
 		clear: both;

css/objects/_forms.scss

@@ -1,8 +1,8 @@
 input, 
 select, 
 textarea {
-	background: $input-background;
-	border: $input-border;
+	background-color: $base-background-colour;
+	border: solid 1px $base-colour;
 	color: $base-colour;
 	display: inline-block;
 	font: inherit;
@@ -35,16 +35,13 @@ textarea {
 }
 
 .btn {
-	background: $btn-background;
-	border: $btn-border;
-	color: $btn-color;
+	background-color: $base-background-colour;
+	border: solid 1px $base-colour;
+	color: $base-colour;
 	cursor: pointer;
 	display: inline-block;
-	line-height: ($base-margin-bottom * 2) * 1px;
 	height: ($base-margin-bottom * 2) * 1px;
+	line-height: ($base-margin-bottom * 2) * 1px;
 	padding: 0 $base-margin-bottom;
 	width: auto;
-	&:hover {
-		background: $btn-background-hover;
-	}
 }

css/objects/_scaffolding.scss

@@ -12,7 +12,6 @@
 
 .row {
   margin-left: -($column-gutter / $container-max-width) * 100%;
-  _overflow: hidden;
   @extend .clearfix;
   @include media($mobile) { 
     margin-left: 0; 
@@ -35,7 +34,6 @@
 @for $i from 1 through $column-count {
   .col-span-#{$i} { 
     width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%;
-    *width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%;
   }
 }
 
@@ -46,6 +44,5 @@
 @for $i from 1 through $column-count {
   .row--no-gutters .column-span-#{$i} { 
     width: ((100 / $column-count) * $i) * 1%;
-    *width: ((100 / $column-count) * $i) - .02 * 1%;
   }
 }

css/style.scss

@@ -19,5 +19,4 @@ Author: Mike Francis
 
 @import 'objects/forms';
 @import 'objects/scaffolding';
-@import 'objects/scaffolding';
 @import 'objects/nav';

footer.php

@@ -5,4 +5,4 @@
 	</footer>
 	<?php wp_footer(); ?>
 	</body>
-</html>
+</html>

functions.php

@@ -33,7 +33,7 @@ function theme_scripts() {
   wp_deregister_script( 'jquery' );
   wp_register_script( 'jquery', ( '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' ), false, '1.10.2', true);
   wp_enqueue_script( 'jquery' );
-  wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), null, true );
+  wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/all.min.js', array( 'jquery' ), null, true );
 }
 
 add_action( 'wp_enqueue_scripts', 'theme_scripts' );

gulpfile.js

@@ -0,0 +1,47 @@
+var gulp     = require('gulp'),
+    concat   = require('gulp-concat'),
+    jshint   = require('gulp-jshint'),
+    imagemin = require('gulp-imagemin'),
+    rename   = require('gulp-rename'),
+    sass     = require('gulp-sass'),
+    uglify   = require('gulp-uglify'),
+    paths    = {
+      css: './css/**/*.scss',
+      img: './img/**',
+      js:  './js/*.js'
+    };
+ 
+gulp.task('sass', function() {
+  gulp.src(paths.css)
+    .pipe(sass({outputStyle: 'compressed'}))
+    .pipe(gulp.dest('.'));
+});
+ 
+gulp.task('img', function() {
+  gulp.src(paths.img)
+    .pipe(imagemin())
+    .pipe(gulp.dest('./img/'))
+});
+
+gulp.task('lint', function() {
+  gulp.src(paths.js)
+    .pipe(jshint())
+    .pipe(jshint.reporter('default'))
+    .pipe(gulp.dest('.'));
+});
+
+gulp.task('scripts', function() {
+  gulp.src(paths.js)
+    .pipe(concat('all.js'))
+    .pipe(gulp.dest('./js/'))
+    .pipe(rename('all.min.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('./js/'));
+});
+ 
+gulp.task('watch', function() {
+  gulp.watch(paths.css, ['sass']);
+  gulp.watch(paths.js, ['lint']);
+});
+ 
+gulp.task('default', ['sass', 'img', 'lint', 'scripts', 'watch']);

js/script.js

@@ -1,11 +1,5 @@
-(function($) {
+;(function($) {
 
-	// Add utility classes to lists/tables
+  // JS goes here
 
-  $('li:last-child,td:last-child,tr:last-child,th:last-child').addClass('last');
-  $('td:nth-child(odd),th:nth-child(odd),tr:nth-child(odd)').addClass('odd');
-  $('td:nth-child(even),th:nth-child(even),tr:nth-child(even)').addClass('even');
-
-  //
-
-})(jQuery);
+})(jQuery);

package.json

@@ -1,11 +0,0 @@
-{
-  "name": "barebones",
-  "version": "0.1.0",
-  "private": true,
-  "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-contrib-sass": "~0.5.0",
-    "grunt-contrib-imagemin": "~0.5.0",
-    "grunt-contrib-watch": "~0.5.3"
-  }
-}

script.js

@@ -0,0 +1,5 @@
+;(function($) {
+
+  // JS goes here
+
+})(jQuery);