Merge pull request #1 from benchmarkstudios/master

Update fork master

.gitignore

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

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "assets/scss/vendor/simple-grid"]
+[submodule "assets/sass/vendor/simple-grid"]
-	path = assets/scss/vendor/simple-grid
+	path = assets/sass/vendor/simple-grid
-	url = https://github.com/pdcreis/simple-grid.git
+	url = https://github.com/benchmarkstudios/simple-grid.git

README.md

@@ -5,13 +5,13 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
 ## Features
 
 * Reset, normalisation and base font/form styles
-* Sass powered - semantically named files all compiled into a single file
+* Sass Boilerplate - semantically named files, organised by folders, all compiled into a single file
 * Semantic use of HTML5 elements, includes Google HTML5 shiv
 * 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!
+* Laravel Elixir to define/customize and run basic Gulp tasks
-* Basic index.php Loop template
+* Basic template files
 * Customised functions.php adding theme support for high customisation
 * Minimised HTTP requests for high Web Performance
 * Localised strings for multiple language support
@@ -19,30 +19,48 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
 
 ## Installation
 
-Run the following commands to include barebones and all it's submodules:
+Clone the barebones repositories into your WordPress /wp-content/themes/ directory:
 
     git clone https://github.com/benchmarkstudios/barebones
     cd barebones
+
+To include all its optional submodules ([Simple Grid](https://github.com/benchmarkstudios/simple-grid) included):
+
     git submodule init
     git submodule update
 
-### Dependencies
+#### Dependencies
 
 * [Node.js](http://nodejs.org)
+* [Gulp](http://gulpjs.com)
 
-#### Optional
+### Using Gulp and Laravel Elixir
 
-* [LiveReload Chrome plugin](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
+Install Gulp as a global NPM package, if you don't have it already on your machine:
 
-Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory and run the following to install all of this project's Grunt dependencies:
+    npm install --global gulp
+
+Install Laravel Elixir:
 
     npm install
 
+Edit your gulpfile.js adding the required tasks (check the [Laravel Elixir](http://laravel.com/docs/master/elixir) documentation for further information).
+
 Then run:
 
-    npm run watch
+    gulp
 
-This will execute the default tasks: compiling sass/js and spawning the file watcher.
+*to compile*
+
+    gulp watch 
+
+*to watch*
+
+    gulp --production 
+
+*to minify*
+
+This will execute all the Gulp tasks on the gulpfile.js.
 
 ## WordPress Support
 

assets/sass/barebones.scss

@@ -0,0 +1,48 @@
+/**
+Theme Name: Barebones
+Theme URI: http://github.com/benchmarkstudios/barebones
+Author: Benchmark
+*/
+
+@charset 'UTF-8';
+
+// 1. Configuration
+@import 
+    'config/variables',
+    'config/mixins';
+
+// 2. Vendors
+@import
+    'vendor/simple-grid/simple-grid';
+
+// 3. Utilities
+@import
+    'utils/reset',
+    'utils/a11y',
+    'utils/responsive',
+    'utils/helpers';
+
+// 4. Base stuff
+@import
+    'base/base',
+    'base/fonts',
+    'base/images',
+    'base/forms',
+    'base/lists',
+    'base/typography';
+
+// 5. Layout-related sections
+@import
+    'layout/main',
+    'layout/header',
+    'layout/footer';
+
+// 6. Components
+@import
+    'components/buttons',
+    'components/nav',
+    'components/alerts';
+
+// 7. Page-specific styles
+@import
+    'pages/home';

assets/sass/base/_base.scss

@@ -0,0 +1,54 @@
+body {
+    color: $base-colour;
+    font-family: $base-font-family;
+    @include font-size($base-font-size);
+    line-height: $base-line-height;
+    -webkit-text-size-adjust: none;    
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6, 
+p, 
+hr, 
+ul, 
+ol,
+dl,
+address {
+    margin-bottom: $base-spacing-unit;
+}
+
+
+/**
+ * Basic styles for links
+ */
+
+a {
+    color: $brand-colour;
+    text-decoration: none;
+    &:hover {
+        color: $base-colour;
+        text-decoration: underline;
+    }
+}
+
+a[href^="tel"]{
+    color: inherit;
+    text-decoration: none;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+}
+
+
+/**
+ * Rulers
+ */
+
+hr {
+    background-color: $base-colour;
+    height: 1px;
+}

assets/sass/base/_fonts.scss

@@ -0,0 +1,3 @@
+/**
+ * This file contains all @font-face declarations, if any.
+ */

assets/sass/base/_forms.scss

@@ -0,0 +1,122 @@
+/**
+ * Blanket input styles for normalisation
+ */
+
+*:focus {
+    outline: 0;
+}
+
+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[type="submit"] {
+    -webkit-border-radius: 0; 
+    border-radius: 0;
+}
+
+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;
+    vertical-align: top;
+    resize: vertical;
+}
+
+
+/**
+ * Form utility classes
+ */
+
+.form--inline {
+    .form__group {
+        display: inline-block;
+    }
+}
+
+.checkbox,
+.radio {
+    display: block;
+    padding-left: $base-spacing-unit;
+    &.inline {
+        display: inline-block;
+    }
+    > input {
+        float: left;
+        margin-left: -($base-spacing-unit);
+        margin-top: 4px;
+    }
+}
+
+.form__group {
+    display: block;
+    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/sass/base/_images.scss

@@ -0,0 +1,19 @@
+img {
+    max-width: 100%;
+    vertical-align: top;
+    &[width],
+    &[height] {
+        max-width: none;
+    }
+}
+
+
+/**
+ * Responsive images
+ */
+
+.is-fluid {
+    display: block;
+    width: 100%;
+    height: auto;
+}

assets/sass/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/sass/base/_typography.scss

@@ -5,4 +5,8 @@ h4,
 h5, 
 h6 {
   font-weight: bold;
+}
+
+small {
+    font-size: .75em;
 }

assets/sass/components/_alerts.scss

@@ -0,0 +1,28 @@
+.alert {
+    padding: $base-spacing-unit;
+    margin-bottom: $base-spacing-unit;
+    border: 1px solid transparent;
+    > p,
+    > ul {
+        margin-bottom: 0;
+    }
+    > p + p {
+        margin-top: $base-spacing-unit;
+    }
+    &.alert--success {
+        color: $success-colour;
+        border-color: $success-colour;
+    }
+    &.alert--info {
+        color: $info-colour;
+        border-color: $info-colour;
+    }
+    &.alert--warning {
+        color: $warning-colour;
+        border-color: $warning-colour;
+    }
+    &.alert--danger {
+        color: $danger-colour;
+        border-color: $danger-colour;
+    }
+}

assets/sass/components/_buttons.scss

@@ -0,0 +1,54 @@
+.btn {
+    background-color: $brand-colour;
+    color: $base-background-colour;
+    border: 1px solid transparent;
+    display: inline-block;
+    padding: ($base-spacing-unit / 4) $base-spacing-unit;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    user-select: none;
+    width: auto;
+    transition: all .5s;
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+    &:hover {
+        text-decoration: none;
+        background-color: $base-background-colour;
+        color: $brand-colour;
+        border: 1px solid $brand-colour;    
+    }
+    .is-disabled,
+    &:disabled {
+        pointer-events: none;
+        opacity: .65;
+    }
+}
+
+.btn--inverse {
+    background-color: $base-background-colour;
+    color: $brand-colour;
+    border: 1px solid $brand-colour;
+    &:hover {
+        background-color: $brand-colour;
+        color: $base-background-colour;
+        border: 1px solid transparent;
+    }
+}
+
+.btn--block {
+    display: block;
+    width: 100%;
+    + .btn--block {
+        margin-top: $base-spacing-unit / 4;
+    }
+}
+
+.btn--link {
+    background-color: transparent;
+    color: $brand-colour;
+}

assets/sass/components/_nav.scss

@@ -0,0 +1,14 @@
+.nav {
+    list-style: none;
+    margin: 0;
+    > li {
+        display: inline-block;
+        margin-right: $base-spacing-unit;
+        &:last-child {
+            margin-right: 0;
+        }
+        > a {
+            display: block;
+        }
+    }
+}

assets/sass/config/_mixins.scss

@@ -0,0 +1,60 @@
+/*
+ * Media query to respond to a minimum size (mobile first)
+ */
+
+@mixin resp-min($size) {
+    @media screen and (min-width: $size) { 
+        @content; 
+    }
+}
+
+
+/*
+ * Media query to respond to a maximum size
+ */
+
+@mixin resp-max($size) {
+    @media screen and (max-width: $size) { 
+        @content; 
+    }
+}
+
+
+/*
+ * Output font size in px/rem
+ */
+
+@mixin font-size($px) {
+    font-size: $px + px;
+    font-size: #{$px / 16}rem;
+}
+
+
+/*
+ * Placeholder mixin for <input>
+ */
+
+@mixin placeholder {
+    $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+    @each $placeholder in $placeholders {
+        &:#{$placeholder}-placeholder {
+            @content;
+        }
+    }
+}
+
+
+/**
+ * Clearfix
+ */
+
+@mixin clearfix {
+    &:before,
+    &:after{
+        content: " ";
+        display: table;
+    }
+    &:after{
+        clear: both;
+    }
+}

assets/sass/config/_variables.scss

@@ -0,0 +1,57 @@
+/**
+ * Colours
+ */
+
+$base-colour:            #444;
+$base-background-colour: #fff;
+
+$brand-colour:           #444; // Example
+$success-colour:         #5CB85C;
+$info-colour:            $brand-colour;
+$warning-colour:         #F0AD4E;
+$danger-colour:          #D9534F;
+
+
+/**
+ * Typography
+ */
+
+$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$serif-font-family:       Georgia, "Times New Roman", Times, serif;
+$base-font-family:        $sans-serif-font-family;
+
+$base-font-size:          16;
+$base-line-height:        1.5;
+$base-spacing-unit:       ($base-font-size * $base-line-height) * 1px;
+
+
+/**
+ * Breakpoints
+ */
+
+$breakpoint-sm: 767px;
+$breakpoint-md: 992px;
+$breakpoint-lg: 1200px;
+
+$breakpoints: (
+    'lg' '(min-width: ' + $breakpoint-lg + ')',
+    'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')',
+    'sm' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width:'  + ($breakpoint-md - 1) + ')',
+    'xs' '(max-width: ' + $breakpoint-sm + ')'
+);
+
+
+/**
+ * Grid
+ */
+
+$grid-max-width: 1200px;
+$grid-columns:   12;
+$grid-gutter:    $base-spacing-unit;
+
+
+/**
+ * Components
+ */
+
+$border-radius: 3px;

assets/sass/utils/_a11y.scss

@@ -0,0 +1,7 @@
+.sr-only {
+    font-size: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 0;
+}

assets/sass/utils/_helpers.scss

@@ -0,0 +1,81 @@
+/**
+ * Clearing and floating
+ */
+
+.alignleft,
+.float-left {
+    float: left;
+    img & {
+        margin-right: $base-spacing-unit;
+    }
+}
+
+.alignright,
+.float-right {
+    float: right;
+    img & {
+        margin-left : $base-spacing-unit;
+    }
+}
+
+.aligncenter,
+.float-center {
+    display: block;
+    margin: {
+        left: auto;
+        right: auto;
+    }
+    img & {
+        margin-bottom: $base-spacing-unit;
+    }
+}
+
+.clearfix {
+    @include clearfix();
+}
+
+
+
+/**
+ * Text aligments
+ */
+
+.align-text-left {
+    text-align: left;
+}
+
+.align-text-right {
+    text-align: right;
+}
+
+.align-text-center {
+    text-align: center;
+}
+
+
+/**
+ * Elements visibility
+ */
+
+.visible-on-mobile {
+    display: none !important;
+    @include resp-max($breakpoint-sm) {
+        display: block !important;
+    }
+}
+
+.visible-on-tablet {
+    display: none !important;
+    @include resp-max($breakpoint-md) {
+        display: block !important;
+    }
+    @include resp-max($breakpoint-sm) {
+        display: none !important;
+    }
+}
+
+.visible-on-desktop {
+    @include resp-max($breakpoint-md) {
+        display: none !important;
+    }
+}

assets/sass/utils/_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/sass/vendor/simple-grid

@@ -0,0 +1 @@
+Subproject commit e87c4f6ee56bb7223a1cb56698cec4d0fdabbd29

assets/scss/barebones.scss

@@ -1,42 +0,0 @@
-/**
-Theme Name: Bare Bones
-Theme URI: http://github.com/benchmarkstudios/barebones
-Author: Benchmark
-*/
-
-// 1. Vendors
-@import
-    'vendor/simple-grid/simple-grid';
-
-// 2. Configuration and helpers
-@import
-    'utilities/variables',
-    'utilities/mixins',
-    'utilities/reset',
-    'utilities/a11y',
-    'utilities/responsive',
-    'utilities/wordpress';
-
-// 3. Base stuff
-@import
-    'base/shared',
-    'base/images',
-    'base/forms',
-    'base/lists',
-    'base/headings',
-    'base/links';
-
-// 4. Layout-related sections
-@import
-    'layout/main',
-    'layout/header',
-    'layout/footer';
-
-// 5. Components
-@import
-    'modules/buttons',
-    'modules/nav';
-
-// 6. Page-specific styles
-@import
-    'pages/home';

assets/scss/base/_forms.scss

@@ -1,112 +0,0 @@
-/**
- * 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;
-  vertical-align: top;
-}
-
-
-/**
- * Form utility classes
- */
-
-.form--inline {
-  .form__group {
-    display: inline-block;
-  }
-}
-
-.checkbox,
-.radio {
-  display: block;
-  padding-left: $base-spacing-unit;
-  &.inline {
-    display: inline-block;
-  }
-  > input {
-    float: left;
-    margin-left: -($base-spacing-unit);
-    margin-top: 4px;
-  }
-}
-
-.form__group {
-  display: block;
-  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/_images.scss

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

assets/scss/base/_links.scss

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

assets/scss/base/_lists.scss

@@ -1,16 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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,24 +0,0 @@
-.btn {
-  background-color: $base-colour;
-  color: $base-background-colour;
-  display: inline-block;
-  height: ($base-spacing-unit * 1.5);
-  line-height: ($base-spacing-unit * 1.5);
-  padding: 0 $base-spacing-unit;
-  text-align: center;
-  width: auto;
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
-}
-
-.btn--block {
-  display: block;
-  width: 100%;
-}
-
-.btn--link {
-  background-color: transparent;
-  color: $base-colour;
-}

assets/scss/modules/_nav.scss

@@ -1,14 +0,0 @@
-.nav {
-  list-style: none;
-  margin: 0;
-  > li {
-      display: inline-block;
-      margin-right: $base-spacing-unit;
-      &:last-child {
-        margin-right: 0;
-      }
-    > a {
-      display: block;
-    }
-  }
-}

assets/scss/utilities/_a11y.scss

@@ -1,7 +0,0 @@
-.sr-only {
-  font-size: 0;
-  height: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-}

assets/scss/utilities/_mixins.scss

@@ -1,60 +0,0 @@
-/*
- * Media query to respond to a minimum size (mobile first)
- */
-
-@mixin resp-min($size) {
-  @media screen and (min-width: $size) { 
-    @content; 
-  }
-}
-
-
-/*
- * Media query to respond to a maximum size
- */
-
-@mixin resp-max($size) {
-  @media screen and (max-width: $size) { 
-    @content; 
-  }
-}
-
-
-/*
- * Output font size in px/rem
- */
-
-@mixin font-size($px) {
-  font-size: $px + px;
-  font-size: #{$px / 16}rem;
-}
-
-
-/*
- * Placeholder mixin for <input>
- */
-
-@mixin placeholder() {
-  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
-  @each $placeholder in $placeholders {
-    &:#{$placeholder}-placeholder {
-      @content;
-    }
-  }
-}
-
-
-/**
- * Clearfix
- */
-
-@mixin clearfix() {
-  &:before,
-  &:after{
-    content: " ";
-    display: table;
-  }
-  &:after{
-    clear: both;
-  }
-}

assets/scss/utilities/_responsive.scss

@@ -1,18 +0,0 @@
-@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/_variables.scss

@@ -1,41 +0,0 @@
-/**
- * Custom variables
- */
-
-
-
-/**
- * Base values
- */
-
-$base-colour:            #444;
-$base-background-colour: #fff;
-$base-font-stack:        'Helvetica Neue', Helvetica, Arial, sans-serif;
-$base-font-size:         16;
-$base-line-height:       1.5;
-$base-spacing-unit:      ($base-font-size * $base-line-height) * 1px;
-
-
-/**
- * Breakpoints
- */
-
-$breakpoint-sm: 767px;
-$breakpoint-md: 992px;
-$breakpoint-lg: 1200px;
-
-$breakpoints: (
-  'lg' '(min-width: ' + $breakpoint-lg + ')',
-  'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')',
-  'sm' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width:'  + ($breakpoint-md - 1) + ')',
-  'xs' '(max-width: ' + $breakpoint-sm + ')'
-);
-
-
-/**
- * Grid
- */
-
-$grid-max-width:    1200px;
-$grid-columns:      12;
-$grid-gutter:       $base-spacing-unit;

assets/scss/utilities/_wordpress.scss

@@ -1,27 +0,0 @@
-.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;
-}

assets/scss/vendor/simple-grid

@@ -1 +0,0 @@
-Subproject commit 4cef1bf7cb635806cb07fc30cbb34ae211881570

footer.php

@@ -1,9 +1,9 @@
-    <footer class="footer" role="contentinfo">
+        <footer class="footer" role="contentinfo">
-      <div class="container">
+            <div class="container">
-        <?php wp_nav_menu( array( 'theme_location' => 'footer' ) ); ?>
+                <?php wp_nav_menu(['theme_location' => 'footer', 'menu_class' => 'nav nav--footer']); ?>
-        &copy; <?php bloginfo( 'name' ); ?> <?php echo date( 'Y' ); ?>
+                &copy; <?php bloginfo( 'name' ); ?> <?php echo date( 'Y' ); ?>
-      </div>
+            </div>
-    </footer>
+        </footer>
-    <?php wp_footer(); ?>
+        <?php wp_footer(); ?>
-  </body>
+    </body>
-</html>
+</html>

functions.php

@@ -1,20 +1,40 @@
 <?php
 
+/**
+ * Custom functions / External files
+ */
+
+require_once 'functions/example.php';
+
+
+
 /**
  * Add support for useful stuff
  */
 
-add_theme_support( 'post-thumbnails' );
+if ( function_exists( 'add_theme_support' ) )
-add_theme_support( 'post-formats', array( 'post' ) ); 
+{
-add_theme_support( 'custom-header' );
+    // Add support for document title tag
-add_theme_support( 'custom-background' );
+    add_theme_support( 'title-tag' );
-add_post_type_support( 'page', 'excerpt' );
+
+    // Add Thumbnail Theme Support
+    add_theme_support( 'post-thumbnails' );
+    add_image_size( 'custom-size', 700, 200, true );
+
+    // Add Support for post formats
+    // add_theme_support( 'post-formats', ['post'] );
+    // add_post_type_support( 'page', 'excerpt' );
+
+    // Localisation Support
+    load_theme_textdomain( 'barebones', get_template_directory() . '/languages' );
+}
+
 
 
 /**
  * Remove junk
  */
- 
+
 define( 'ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true );
 define( 'ICL_DONT_LOAD_LANGUAGES_JS', true );
 
@@ -30,116 +50,141 @@ remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 
-function barebones_remove_comments_rss( $for_comments ) {
+function barebones_remove_comments_rss( $for_comments )
+{
     return;
 }
 
 add_filter( 'post_comments_feed_link', 'barebones_remove_comments_rss' );
 
 
+
 /**
  * jQuery the right way
  */
 
-function barebones_scripts() {
+function barebones_scripts()
-  /*
+{
-   * For IE8 to play nice, you'll need to include your CSS here, for example:
+    /*
-   */
+     * For IE8 to play nice, you'll need to include your CSS here, for example:
-  // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
+     */
-  wp_deregister_script( 'jquery' );
+    // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
-  wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2', true );
+    // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' );
-  wp_enqueue_script( 'jquery' );
+    wp_deregister_script( 'jquery' );
-  wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.min.js', array( 'jquery' ), null, true );
+    wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3', true );
+    wp_enqueue_script( 'jquery' );
+    wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.min.js?' . time(), ['jquery'], null, true );
 }
 
 add_action( 'wp_enqueue_scripts', 'barebones_scripts' );
 
 
+
 /**
  * Nav menus
  */
 
-if ( function_exists( 'register_nav_menus' ) ) {
+if ( function_exists( 'register_nav_menus' ) )
-  register_nav_menus(array(
+{
-    'header' => 'Header',
+    register_nav_menus([
-    'footer' => 'Footer'
+        'header' => 'Header',
-  ));
+        'footer' => 'Footer'
+    ]);
 }
 
-function barebones_nav_menu_args( $args = '' ) {
+function barebones_nav_menu_args( $args = '' )
-  $args['container']       = false;
+{
-  $args['container_class'] = false;
+    $args['container']       = false;
-  $args['menu_id']         = false;
+    $args['container_class'] = false;
-  $args['items_wrap']      = '<ul class="%2$s">%3$s</ul>';
+    $args['menu_id']         = false;
-  return $args;
+    $args['items_wrap']      = '<ul class="%2$s">%3$s</ul>';
+
+    return $args;
 }
 
 add_filter( 'wp_nav_menu_args', 'barebones_nav_menu_args' );
 
 
+
 /**
  * Email
  */
 
-function barebones_mail_from( $email ) {
+function barebones_mail_from( $email )
-  return get_option( 'admin_email' );
+{
+    return get_option( 'admin_email' );
 }
 
 add_filter( 'wp_mail_from', 'barebones_mail_from' );
 
-function barebones_mail_from_name( $name ) {
+
-  return get_bloginfo( 'name' );
+function barebones_mail_from_name( $name )
+{
+    return get_bloginfo( 'name' );
 }
 
 add_filter( 'wp_mail_from_name', 'barebones_mail_from_name' );
 
 
+
 /**
  * Shortcodes ([button] shortcode included)
  */
 
-function button_shortcode( $atts, $content = null ) {
+function button_shortcode( $atts, $content = null )
-  return '<a class="btn" href="' . $atts['link'] . '">' . $content . '</a>';
+{
+    $atts['class']  = isset($atts['class']) ? $atts['class'] : 'btn';
+
+    return '<a class="' . $atts['class'] . '" href="' . $atts['link'] . '">' . $content . '</a>';
 }
 
 add_shortcode( 'button', 'button_shortcode' );
 
 
+
 /**
  * TinyMCE
  */
 
-function barebones_mce_buttons_2( $buttons ) {
+function barebones_mce_buttons_2( $buttons )
-  array_unshift( $buttons, 'styleselect' );
+{
-  $buttons[] = 'hr';
+    array_unshift( $buttons, 'styleselect' );
-  return $buttons;
+    $buttons[] = 'hr';
+
+    return $buttons;
 }
 
 add_filter( 'mce_buttons_2', 'barebones_mce_buttons_2' );
 
-function barebones_tiny_mce_before_init( $settings ) {
+
-  $style_formats = array(
+function barebones_tiny_mce_before_init( $settings )
-    /* 
+{
-     * Example 
+    $style_formats = [
-     *
+        // [
-    array(
+        //     'title'    => '',
-      'title'    => '',
+        //     'selector' => '',
-      'selector' => '',
+        //     'classes'  => ''
-      'classes'  => ''
+        // ]
-    ) */
+    ];
-  );
+
-  $settings['style_formats'] = json_encode( $style_formats );
+    $settings['style_formats'] = json_encode( $style_formats );
-  return $settings;
+    $settings['style_formats_merge'] = true;
+
+    return $settings;
 }
 
 add_filter( 'tiny_mce_before_init', 'barebones_tiny_mce_before_init' );
 
 
+
 /**
- * Get image URL for whatever size.
+ * Get post thumbnail url
+ * 
+ * @param  int $post_id
+ * @return string
  */
 
-function wp_get_attachment_image_url( $id, $size = 'full', $attrs = []) {
+function get_post_thumbnail_url( $post_id )
-  $image = wp_get_attachment_image_src( $id, $size, $attrs );
+{
-  return $image[0];
+    return wp_get_attachment_url( get_post_thumbnail_id( $post_id ) );
 }

functions/example.php

@@ -0,0 +1,3 @@
+<?php
+
+    //

gulpfile.js

@@ -0,0 +1,29 @@
+// Notifications (comment out to disable notifications)
+// process.env.DISABLE_NOTIFIER = true;
+
+var gulp = require('gulp');
+var gulpImagemin = require('gulp-imagemin');
+var elixir = require('laravel-elixir');
+
+// Assets path
+elixir.config.assetsPath = 'assets';
+
+// Make autoprefixer support older browsers
+elixir.config.css.autoprefix.options.browsers =  ['last 15 versions'];
+
+// Imagemin
+var Task = elixir.Task;
+elixir.extend('imagemin', function(src, dest) {
+  new Task('imagemin', function() {
+    return gulp.src(elixir.config.assetsPath + src)
+        .pipe(gulpImagemin())
+        .pipe(gulp.dest(dest));
+  }).watch(elixir.config.assetsPath + src);
+});
+
+// Run elixir tasks
+elixir(function(mix) {
+    mix.sass('barebones.scss', 'style.css')
+       .scripts(['script.js'], 'js/script.min.js')
+       .imagemin('/images/**/*', './img');
+});

header.php

@@ -1,29 +1,28 @@
 <!DOCTYPE html>
+<!--[if IE 8]><html <?php language_attributes(); ?> class="ie8"><![endif]-->
+<!--[if lte IE 9]><html <?php language_attributes(); ?> class="ie9"><![endif]-->
 <html <?php language_attributes(); ?>>
-  <head>
+    <head>
-    <meta charset="<?php bloginfo( 'charset' ); ?>">
+        <meta charset="<?php bloginfo( 'charset' ); ?>">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <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, maximum-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="dns-prefetch" href="//google-analytics.com">
+        <link rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_url' ) . '?' . time(); ?>">
-    <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
+        <?php wp_head(); ?>
-    <link rel="shortcut icon" href="/favicon.ico">
+        <!--[if lt IE 10]>
-    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.png">
+        <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
-    <?php wp_head(); ?>
+        <![endif]-->
-    <!--[if lt IE 10]>
+        <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
-    <![endif]-->
+        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <!--[if lt IE 9]>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
-    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
+        <![endif]-->
-    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    </head>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
+    <body <?php body_class(); ?>>
-    <![endif]-->
+        <header class="header" role="banner">
-  </head>
+            <div class="container">
-  <body <?php body_class(); ?>>
+                <nav role="navigation">
-     <header class="header" role="banner">
+                    <?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
-      <div class="container">
+                </nav>
-        <nav role="navigation">
+            </div>
-          <?php wp_nav_menu( array( 'theme_location' => 'header' ) ); ?>
+        </header>
-        </nav>
-      </div>
-    </header>

index.php

@@ -1,25 +1,25 @@
 <?php get_header(); ?>
 
 <main class="main" role="main">
-  <div class="container">
+    <div class="container">
 
-  <?php while ( have_posts() ) : the_post(); ?>
+        <?php while ( have_posts() ) : the_post(); ?>
 
-  <article <?php post_class(); ?>>
+            <article <?php post_class(); ?>>
 
-    <header role="heading">
+                <header class="post__header" role="heading">
-      <h3 class="post__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
+                    <h3 class="post__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
-      <p class="post__date"><time><?php echo human_time_diff( strtotime( $post->post_date ) ) . ' ' . __( 'ago' ); ?></time></p>
+                    <p class="post__date"><time><?php echo human_time_diff( strtotime( $post->post_date ) ) . ' ' . __( 'ago' ); ?></time></p>
-      <p class="post__comments"><?php comments_popup_link( __( 'No comments yet' ), __( '1 comment' ), __( '% comments' ) ); ?></p>
+                    <p class="post__comments"><?php comments_popup_link( __( 'No comments yet' ), __( '1 comment' ), __( '% comments' ) ); ?></p>
-    </header>
+                </header>
 
-    <?php the_content( __( 'Read More' ) ); ?>
+                <?php the_content( __( 'Read More' ) ); ?>
 
-  </article>
+            </article>
 
-  <?php endwhile; ?>
+        <?php endwhile; ?>
 
-  </div>
+    </div>
 </main>
 
 <?php get_footer(); ?>

js/script.min.js

@@ -1 +1,2 @@
-!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]);
+!function(){}($);
+//# sourceMappingURL=script.min.js.map

package.json

@@ -1,44 +1,25 @@
 {
   "name": "barebones",
-  "description": "A lightweight, skeletal, responsive WordPress boilerplate theme for HTML5 and beyond.",
   "version": "2.0.0",
+  "author": "Benchmark Studios",
+  "description": "A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond",
   "license": "MIT",
-  "author": {
+  "homepage": "https://github.com/benchmarkstudios/barebones#readme",
-    "name": "Benchmark",
-    "email": "hello@benchmark.co.uk",
-    "url": "http://www.benchmark.co.uk"
-  },
   "repository": {
     "type": "git",
-    "url": "benchmarkstudios/barebones"
+    "url": "git+https://github.com/benchmarkstudios/barebones.git"
+  },
+  "bugs": {
+    "url": "https://github.com/benchmarkstudios/barebones/issues"
   },
   "scripts": {
-    "compile-sass": "node-sass --output-style=compressed assets/scss/barebones.scss style.css",
+    "test": "echo \"Error: no test specified\" && exit 1"
-    "autoprefix-sass": "autoprefixer -b 'last 10 versions' 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": "$"
   },
+  "private": true,
   "devDependencies": {
-    "browserify": "~9.0.4",
+    "gulp": "^3.8.8",
-    "browserify-shim": "~3.8.3",
+    "gulp-imagemin": "^3.0.1",
-    "uglify-js": "~2.4.19",
+    "laravel-elixir": "^4.2.1"
-    "autoprefixer": "~5.1.0",
+  },
-    "node-sass": "~2.1.1",
+  "dependencies": {}
-    "fsmonitor": "~0.2.4",
-    "livereload": "~0.3.6",
-    "browserify-global-shim": "~1.0.0"
-  }
 }

page.php

@@ -0,0 +1,23 @@
+<?php get_header(); ?>
+
+<main class="main" role="main">
+    <div class="container">
+
+        <?php while ( have_posts() ) : the_post(); ?>
+
+            <article <?php post_class(); ?>>
+
+                <header role="heading">
+                    <h3 class="post__title"><?php the_title(); ?></h3>
+                </header>
+
+                <?php the_content(); ?>
+
+            </article>
+
+        <?php endwhile; ?>
+
+    </div>
+</main>
+
+<?php get_footer(); ?>

single.php

@@ -0,0 +1,28 @@
+<?php get_header(); ?>
+
+<main class="main" role="main">
+    <div class="container">
+
+        <?php while ( have_posts() ) : the_post(); ?>
+
+            <article <?php post_class(); ?>>
+
+                <header class="post__header" role="heading">
+                    <h3 class="post__title"><?php the_title(); ?></h3>
+                </header>
+
+                <?php the_content(); ?>
+
+                <footer class="post__footer">
+                    <p class="post__date"><time><?php echo human_time_diff( strtotime( $post->post_date ) ) . ' ' . __( 'ago' ); ?></time></p>
+                    <p class="post__comments"><?php comments_popup_link( __( 'No comments yet' ), __( '1 comment' ), __( '% comments' ) ); ?></p>
+                </footer>
+
+            </article>
+
+        <?php endwhile; ?>
+
+    </div>
+</main>
+
+<?php get_footer(); ?>

templates/template-demo.php

@@ -0,0 +1,31 @@
+<?php 
+
+    /**
+     * Template Name: Demo page template
+     */
+
+    get_header(); 
+
+?>
+
+<main class="main" role="main">
+    <div class="container">
+
+        <?php while ( have_posts() ) : the_post(); ?>
+
+            <article <?php post_class(); ?>>
+
+                <header role="heading">
+                    <h3 class="post__title"><?php the_title(); ?></h3>
+                </header>
+
+                <?php the_content(); ?>
+
+            </article>
+
+        <?php endwhile; ?>
+
+    </div>
+</main>
+
+<?php get_footer(); ?>