Merge pull request #17 from benchmarkstudios/v2

Merged.

.gitignore

@@ -2,3 +2,5 @@ npm-debug.log
 .sass-cache
 node_modules
 bower_components
+assets/scss/vendor
+tests

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "scss/simple-grid"]
-	path = scss/simple-grid
-	url = git://github.com/pdcreis/simple-grid.git

Gruntfile.js

@@ -1,96 +0,0 @@
-module.exports = function(grunt) {
- 
- // Add your script files here in order of precedence
- 
- var scripts = [
-  'js/script.js'
- ];
- 
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
-    autoprefixer: {
-      single_file: {
-        options: {
-          browsers: ['last 2 versions', 'ie 8', 'ie 9']
-        },
-        files: { 'style.css': 'style.css' }
-      }
-    },
-    imageoptim: {
-      src: ['img/'],
-      options: {
-        quitAfter: true
-      }
-    },
-    sass: {
-      dist: {
-        options: {
-          outputStyle: 'compressed'
-        },
-        files: { 'style.css': 'scss/style.scss' }
-      }
-    },
-    svgmin: {
-      options: {
-        plugins: [{
-          removeViewBox: false
-        }],
-      },
-      dist: {
-        files: [{
-          expand: true,
-          cwd: 'img/',
-          src: ['*.svg'],
-          dest: 'img/',
-          ext: '.svg'
-        }],
-      }
-    },
-    svg2png: {
-      all: {
-        files: [{ 
-          src: ['img/*.svg'], 
-          dest: '.'
-        }],
-      }
-    },
-    uglify: {
-      options: {
-        mangle: false
-      },
-      all: {
-        files: {
-          'js/script.min.js': scripts
-        }
-      }
-    },
-    watch: {
-      css: {
-        files: ['scss/**/*.scss'],
-        tasks: ['sass', 'autoprefixer'],
-        options: {
-          livereload: true
-        }
-      },
-      js: {
-        files: scripts,
-        tasks: ['uglify'],
-        options: {
-          livereload: true
-        }
-      }
-    }
-  });
- 
-  grunt.loadNpmTasks('grunt-autoprefixer');
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-imageoptim');
-  grunt.loadNpmTasks('grunt-svg2png');
-  grunt.loadNpmTasks('grunt-svgmin');
- 
-  grunt.registerTask('img', ['svgmin', 'svg2png', 'imageoptim']);
-  grunt.registerTask('default', ['sass', 'uglify', 'watch']);
- 
-};

README.md

@@ -1,6 +1,6 @@
 # barebones
 
-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.
+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 we thought we would create my own which is great as a starting point with powerful features to encourage rapid development for most projects.
 
 ## Features
 
@@ -10,22 +10,22 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
 * WAI-ARIA role ready
 * Comes pre-bundled with cached CDN version of jQuery
 * jQuery plugin agnostic
+* Browserify for modular JavaScript in the browser, stop those spaghetti files!
 * 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 automatic image optimisation, Sass compiling and watching, css minification and live reload support
+* Sass compiling and watching, css minification and live reload support
 
 ## Installation
 
 Run the following to include barebones and all it's submodules:
 
-    git clone --recursive git@github.com:benchmarkstudios/barebones.git
+    git clone git@github.com:benchmarkstudios/barebones.git
 
 ### Dependencies
 
 * [Node.js](http://nodejs.org)
-* [Grunt](http://gruntjs.com)
 
 #### Optional
 
@@ -35,11 +35,7 @@ Clone/download the barebones repositories into your WordPress /wp-content/themes
 
     $ npm install
 
-Then run `grunt` to execute the default tasks: compiling sass/js and creating the watcher.
-
-To aid performance, the image-centric tasks aren't run by default and can be executed by running:
-
-    $ grunt img
+Then run `npm run watch` to execute the default tasks: compiling sass/js and creating the watcher.
 
 ## WordPress Support
 
@@ -52,11 +48,3 @@ Compatible with WordPress 3.2 and above, but always use the latest version.
 * Safari 4.0+
 * Chrome 14.0+
 * Opera 10.0+
-
-
-## Roadmap
-
-* ~~Organisation of Sass folders~~
-* ~~Simple grid framework~~
-* ~~Organisation of JS~~
-* Investigate browserify issue

assets/js/script.js

@@ -0,0 +1,7 @@
+// var $ = require('jquery');
+
+(function() {
+
+  
+
+})($);

assets/scss/_defaults.scss

@@ -1,3 +1,9 @@
+/**
+ * Custom variables
+ */
+
+
+
 /**
  * Base values
  */
@@ -33,8 +39,3 @@ $breakpoints: (
 $grid-max-width:    1200px;
 $grid-columns:      12;
 $grid-gutter:       $base-spacing-unit;
-
-
-/**
- * Custom variables
- */

assets/scss/barebones.scss

@@ -0,0 +1,26 @@
+/**
+Theme Name: Bare Bones
+Theme URI: http://github.com/benchmarkstudios/barebones
+Author: Benchmark
+*/
+
+@import 'defaults';
+
+@import 'utilities/mixins';
+@import 'utilities/reset';
+@import 'utilities/a11y';
+@import 'utilities/responsive';
+@import 'utilities/wordpress';
+
+@import 'vendor/simple-grid/simple-grid';
+
+@import 'base/normalise';
+@import 'base/shared';
+@import 'base/images';
+@import 'base/forms';
+@import 'base/lists';
+@import 'base/headings';
+@import 'base/links';
+
+@import 'modules/nav';
+@import 'modules/buttons';

assets/scss/base/_forms.scss

@@ -0,0 +1,101 @@
+/**
+ * Blanket input styles for normalisation
+ */
+
+input, 
+select, 
+textarea {
+  background-color: $base-background-colour;
+  border: solid 1px $base-colour;
+  border-radius: 0;
+  color: $base-colour;
+  line-height: ($base-spacing-unit * 1.5);
+  height: ($base-spacing-unit * 1.5);
+  padding: 0 ($base-spacing-unit / 2);
+  width: 100%;
+}
+
+input[type="checkbox"], 
+input[type="radio"] {
+  background: transparent;
+  border: 0;
+  line-height: normal;
+  height: auto;
+  width: auto;
+}
+
+input[type="file"] {
+  line-height: normal;
+  height: auto;
+  padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2);
+}
+
+input[disabled] {
+  background-color: whitesmoke;
+  cursor: not-allowed;
+}
+
+select {
+  line-height: normal;
+  padding: 0;
+  padding-left: ($base-spacing-unit / 2);
+}
+
+textarea {
+  min-height: ($base-spacing-unit * 4);
+  overflow: auto;
+}
+
+
+/**
+ * Form utility classes
+ */
+
+.checkbox,
+.radio {
+  display: block;
+  padding-left: $base-spacing-unit;
+  input {
+    float: left;
+    margin-left: -($base-spacing-unit);
+    margin-top: 4px;
+  }
+}
+
+.form__group {
+  margin-bottom: $base-spacing-unit;
+}
+
+.form__label {
+  display: block;
+  margin-bottom: ($base-spacing-unit / 2);
+}
+
+
+/**
+ * Input Group
+ *
+ * Allows for prepend/append of elements 
+ * (such as icons) on an input.
+ */
+
+.input-group {
+  position: relative;
+  > input {
+    padding: 0 ($base-spacing-unit * 2);
+  }
+  .input-group__addon {
+    line-height: ($base-spacing-unit * 1.5);
+    height: ($base-spacing-unit * 1.5);
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: ($base-spacing-unit * 1.5);
+    &:first-child {
+      left: 0;
+    }
+    &:last-child {
+      right: 0;
+    }
+  }
+}

assets/scss/base/_headings.scss

@@ -0,0 +1,8 @@
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+  font-weight: bold;
+}

assets/scss/base/_images.scss

@@ -0,0 +1,7 @@
+img {
+  max-width: 100%;
+  &[width],
+  &[height] {
+    max-width: none;
+  }
+}

assets/scss/base/_links.scss

@@ -0,0 +1,4 @@
+a {
+  color: inherit;
+  text-decoration: none;
+}

assets/scss/base/_lists.scss

@@ -0,0 +1,16 @@
+ul, 
+ol {
+  margin-left: $base-spacing-unit;
+}
+
+li {
+  > ul, 
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+.list-unstyled {
+  list-style: none;
+  margin-left: 0;
+}

assets/scss/base/_shared.scss

@@ -0,0 +1,21 @@
+body {
+  color: $base-colour;
+  font-family: $base-font-stack;
+  @include font-size($base-font-size);
+  line-height: $base-line-height;
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6, 
+p, 
+hr, 
+ul, 
+ol,
+dl,
+address {
+  margin-bottom: $base-spacing-unit;
+}

assets/scss/modules/_buttons.scss

@@ -1,11 +1,7 @@
 .btn {
   background-color: $base-colour;
-  border: 0;
   color: $base-background-colour;
-  cursor: pointer;
   display: inline-block;
-  font: inherit;
-  font-weight: bold;
   height: ($base-spacing-unit * 1.5);
   line-height: ($base-spacing-unit * 1.5);
   padding: 0 $base-spacing-unit;
@@ -16,3 +12,13 @@
     padding: 0;
   }
 }
+
+.btn--block {
+  display: block;
+  width: 100%;
+}
+
+.btn--link {
+  background-color: transparent;
+  color: $base-colour;
+}

assets/scss/modules/_forms.scss

@@ -0,0 +1,3 @@
+.form__group {
+  margin-bottom: $base-spacing-unit;
+}

assets/scss/modules/_nav.scss

@@ -3,6 +3,10 @@
   margin: 0;
   > li {
       display: inline-block;
+      margin-right: $base-spacing-unit;
+      &:last-child {
+        margin-right: 0;
+      }
     > a {
       display: block;
     }

assets/scss/utilities/_a11y.scss

@@ -0,0 +1,4 @@
+.sr-only {
+  font-size: 0;
+  position: absolute;
+}

assets/scss/utilities/_mixins.scss

@@ -34,7 +34,7 @@
  * Placeholder mixin for <input>
  */
 
-@mixin placeholder {
+@mixin placeholder() {
   $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
   @each $placeholder in $placeholders {
     &:#{$placeholder}-placeholder {
@@ -42,3 +42,19 @@
     }
   }
 }
+
+
+/**
+ * Clearfix
+ */
+
+@mixin clearfix() {
+  &:before,
+  &:after{
+    content: " ";
+    display: table;
+  }
+  &:after{
+    clear: both;
+  }
+}

assets/scss/utilities/_reset.scss

@@ -0,0 +1,63 @@
+* {
+  background-color: transparent;
+  border: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  padding: 0;
+  text-rendering: optimizeLegibility;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+html {
+  background-color: white;
+  font-size: 100%;
+  min-height: 100%;
+  text-size-adjust: 100%;
+}
+
+input, 
+select, 
+textarea,
+button {
+  color: inherit;
+  display: inline-block;
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+  &[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  th,
+  td {
+    text-align: left;
+  }
+}
+
+b,
+strong,
+th {
+  font-weight: bold;
+}

assets/scss/utilities/_responsive.scss

@@ -0,0 +1,18 @@
+@each $breakpoint in $breakpoints {
+
+  $key   : nth($breakpoint, 1);
+  $value : nth($breakpoint, 2);
+
+  .visible-#{$key} {
+    @media only screen and #{$value} {
+      display: block !important;
+    }
+  }
+
+  .hidden-#{$key} {
+    @media only screen and #{$value} {
+      display: none !important;
+    }
+  }
+
+}

assets/scss/utilities/_wordpress.scss

@@ -0,0 +1,27 @@
+.alignleft {
+  float: left;
+}
+
+img.alignleft {
+  margin-right: $base-spacing-unit;
+}
+
+.alignright {
+  float: right;
+}
+
+img.alignright {
+  margin-left : $base-spacing-unit;
+}
+
+.aligncenter {
+  display: block;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+img.aligncenter {
+  margin-bottom: $base-spacing-unit;
+}

header.php

@@ -3,7 +3,7 @@
   <head>
     <meta charset="<?php bloginfo( 'charset' ); ?>">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
     <title><?php wp_title( '' ); ?></title>
     <link rel="dns-prefetch" href="//google-analytics.com">
     <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
@@ -14,8 +14,8 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
     <![endif]-->
     <!--[if lt IE 9]>
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
     <![endif]-->
   </head>

js/script.js

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

js/script.min.js

@@ -0,0 +1 @@
+!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){!function(){}($)},{}]},{},[1]);

package.json

@@ -1,12 +1,44 @@
 {
+  "name": "barebones",
+  "description": "A lightweight, skeletal, responsive WordPress boilerplate theme for HTML5 and beyond.",
+  "version": "2.0.0",
+  "license": "MIT",
+  "author": {
+    "name": "Benchmark",
+    "email": "hello@benchmark.co.uk",
+    "url": "http://www.benchmark.co.uk"
+  },
+  "repository": {
+    "type": "git",
+    "url": "benchmarkstudios/barebones"
+  },
+  "scripts": {
+    "compile-sass": "node-sass --output-style=compressed assets/scss/barebones.scss style.css",
+    "autoprefix-sass": "autoprefixer -b 'last 10 versions' --map style.css",
+    "process-sass": "npm run compile-sass && npm run autoprefix-sass",
+    "watch-sass": "fsmonitor -d 'assets/scss' -s '+*.scss' npm run process-sass",
+    "browserify-js": "browserify assets/js/script.js -o js/script.min.js",
+    "uglify-js": "uglifyjs js/script.min.js -o js/script.min.js -c",
+    "process-js": "npm run browserify-js && npm run uglify-js",
+    "watch-js": "fsmonitor -d 'assets/js' -s '+*.js' npm run process-js",
+    "watch": "livereload & npm run watch-sass & npm run watch-js"
+  },
+  "browserify": {
+    "transform": [
+      "browserify-global-shim"
+    ]
+  },
+  "browserify-global-shim": {
+      "jquery": "$"
+  },
   "devDependencies": {
-    "grunt": "~0.4.2",
-    "grunt-sass": "~0.17.0",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-imageoptim": "~1.4.1",
-    "grunt-svg2png": "~0.2.0",
-    "grunt-svgmin": "~0.4.0",
-    "grunt-contrib-uglify": "~0.5.0",
-    "grunt-autoprefixer": "~0.8.2"
+    "browserify": "~9.0.4",
+    "browserify-shim": "~3.8.3",
+    "uglify-js": "~2.4.19",
+    "autoprefixer": "~5.1.0",
+    "node-sass": "~2.1.1",
+    "fsmonitor": "~0.2.4",
+    "livereload": "~0.3.6",
+    "browserify-global-shim": "~1.0.0"
   }
 }

scss/base/_forms.scss

@@ -1,56 +0,0 @@
-button {
-  cursor: pointer;
-}
-
-input, 
-select, 
-textarea {
-  background-color: $base-background-colour;
-  border: solid 1px $base-colour;
-  color: $base-colour;
-  display: inline-block;
-  font: inherit;
-  line-height: $base-spacing-unit;
-  padding: ($base-spacing-unit / 4);
-  width: 100%;
-}
-
-input {
-  -webkit-appearance: none;
-  border-radius: 0;
-}
-
-input[type="checkbox"], 
-input[type="radio"] {
-  background: transparent;
-  border: 0;
-  width: auto;
-}
-
-label {
-  display: block;
-  font-weight: bold;
-}
-
-select {
-  height: ($base-spacing-unit * 1.5);
-}
-
-textarea {
-  min-height: ($base-spacing-unit * 4);
-}
-
-.form__group {
-  margin-bottom: $base-spacing-unit;
-  .form__group__controls {
-    @extend .clearfix;
-    label {
-      font-weight: normal;
-    }
-    &.form__group__controls--inline {
-      label {
-        display: inline-block;
-      }
-    }
-  }
-}

scss/base/_normalise.scss

@@ -1,87 +0,0 @@
-html {
-  background-color: $base-background-colour;
-  color: $base-colour;
-  font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack;
-  min-height: 100%;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6, 
-p, 
-hr, 
-ul, 
-ol,
-dl,
-address {
-  margin-bottom: $base-spacing-unit;
-}
-
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6 {
-  line-height: $base-spacing-unit;
-}
-
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6, 
-strong,
-th {
-  font-weight: bold;
-}
-
-ul, 
-ol {
-  margin-left: $base-spacing-unit;
-}
-
-ul ul, 
-ol ol {
-  margin-bottom: 0;
-}
-
-img {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-
-blockquote {
-  font-family: serif;
-  padding-left: $base-spacing-unit;
-}
-
-em {
-  font-style: italic;
-}
-
-hr {
-  background-color: $base-colour;
-  border: 0;
-  color: $base-colour;
-  height: 1px;
-}
-
-table {
-  width: 100%;
-  th,
-  td {
-    padding: ($base-spacing-unit / 4);
-    text-align: left;
-  }
-}

scss/generic/_reset.scss

@@ -1,12 +0,0 @@
-* {
-  background-color: transparent;
-  border: 0;
-  box-sizing: border-box;
-  font-size: 100%;
-  font-smoothing: antialiased;
-  font-style: normal;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-  text-rendering: optimizeLegibility;
-}

scss/generic/_utilities.scss

@@ -1,81 +0,0 @@
-/**
- * WordPress specific classes
- */
-
-.alignleft {
-  float: left;
-}
-
-img.alignleft {
-  margin-right: $base-spacing-unit;
-}
-
-.alignright {
-  float: right;
-}
-
-img.alignright {
-  margin-left : $base-spacing-unit;
-}
-
-.aligncenter {
-  display: block;
-  margin: {
-    left: auto;
-    right: auto;
-  }
-}
-
-img.aligncenter {
-  margin-bottom: $base-spacing-unit;
-}
-
-
-/**
- * Clear fix for floats
- */
- 
-.clearfix {
-  &:before,
-  &:after{
-    content: '';
-    display: table;
-    line-height: 0;
-  }
-  &:after{
-    clear: both;
-  }
-}
-
-
-/**
- * Accessibility
- */
- 
-.sr-only {
-  display: none;
-}
-
-
-/**
- * Responsive
- */
-
-@each $breakpoint in $breakpoints {
-
-  $key   : nth($breakpoint, 1);
-  $value : nth($breakpoint, 2);
-
-  .visible-#{$key} {
-    @media only screen and #{$value} {
-      display: block !important;
-    }
-  }
-
-  .hidden-#{$key} {
-    @media only screen and #{$value} {
-      display: none !important;
-    }
-  }
-
-}

scss/simple-grid

@@ -1 +0,0 @@
-Subproject commit 891fd924dddfbe62fb5ddacedcaca1d7e66e1fe5

scss/style.scss

@@ -1,19 +0,0 @@
-/**
-Theme Name: Bare Bones
-Theme URI: http://github.com/benchmarkstudios/barebones
-Author: Benchmark
-*/
-
-@import 'vars';
-
-@import 'simple-grid/simple-grid';
-
-@import 'generic/mixins';
-@import 'generic/reset';
-@import 'generic/utilities';
-
-@import 'base/normalise';
-@import 'base/forms';
-
-@import 'modules/nav';
-@import 'modules/buttons';