v2 first draft

README.md

@@ -5,12 +5,12 @@ 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
 * Customised functions.php adding theme support for high customisation
 * Minimised HTTP requests for high Web Performance
@@ -19,10 +19,13 @@ 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:
+Run the following commands to include barebones:
 
     git clone https://github.com/benchmarkstudios/barebones
     cd barebones
+
+To include all its optional submodules ([Simple Grid](https://github.com/pdcreis/simple-grid) included):
+
     git submodule init
     git submodule update
 
@@ -34,15 +37,19 @@ Run the following commands to include barebones and all it's submodules:
 
 * [LiveReload Chrome plugin](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
 
-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:
+Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory and run the following to install all [Laravel Elixir](http://laravel.com/docs/master/elixir) dependencies:
 
     npm install
 
+Edit your gulpfile.js adding the required tasks (check the [Laravel Elixir](http://laravel.com/docs/master/elixir) documentation for further information and more tasks).
+
 Then run:
 
-    npm run watch
+    gulp *to compile*
+	gulp watch *to watch*
+	gulp --production *to minify*
 
-This will execute the default tasks: compiling sass/js and spawning the file watcher.
+This will execute all the Gulp tasks on the gulpfile.js.
 
 ## WordPress Support
 

assets/sass/barebones.scss

@@ -0,0 +1,46 @@
+/**
+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/typography';
+
+// 5. Layout-related sections
+@import
+    'layout/main',
+    'layout/header',
+    'layout/footer';
+
+// 6. Components
+@import
+    'components/buttons',
+    'components/nav';
+
+// 7. Page-specific styles
+@import
+    'pages/home';

assets/sass/base/_base.scss

@@ -0,0 +1,35 @@
+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;
+}
+
+
+/**
+ * Basic styles for links
+ */
+
+a {
+    color: $brand-color;
+    text-decoration: none;
+    &:hover {
+        color: $text-color;
+        text-decoration: underline;
+    }
+}

assets/sass/base/_fonts.scss

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

assets/sass/base/_images.scss

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

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/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/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/_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/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;
-    }
-  }
-
-}

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' ]); ?>
-        &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>

functions.php

@@ -5,12 +5,13 @@
  */
 
 add_theme_support( 'post-thumbnails' );
-add_theme_support( 'post-formats', array( 'post' ) ); 
+add_theme_support( 'post-formats', ['post'] ); 
 add_theme_support( 'custom-header' );
 add_theme_support( 'custom-background' );
 add_post_type_support( 'page', 'excerpt' );
 
 
+
 /**
  * Remove junk
  */
@@ -37,6 +38,7 @@ function barebones_remove_comments_rss( $for_comments ) {
 add_filter( 'post_comments_feed_link', 'barebones_remove_comments_rss' );
 
 
+
 /**
  * jQuery the right way
  */
@@ -46,100 +48,117 @@ function barebones_scripts() {
    * 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_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
   wp_deregister_script( 'jquery' );
-  wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2', true );
+  wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, '2.1.4', true );
   wp_enqueue_script( 'jquery' );
-  wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.min.js', array( 'jquery' ), null, true );
+  wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/scripts.min.js', ['jquery'], null, true );
 }
 
 add_action( 'wp_enqueue_scripts', 'barebones_scripts' );
 
 
+
 /**
  * Nav menus
  */
 
 if ( function_exists( 'register_nav_menus' ) ) {
-  register_nav_menus(array(
+    register_nav_menus([
-    'header' => 'Header',
+        'header' => 'Header',
-    'footer' => 'Footer'
+        'footer' => 'Footer'
-  ));
+    ]);
 }
 
 function barebones_nav_menu_args( $args = '' ) {
-  $args['container']       = false;
+    $args['container']       = false;
-  $args['container_class'] = false;
+    $args['container_class'] = false;
-  $args['menu_id']         = false;
+    $args['menu_id']         = false;
-  $args['items_wrap']      = '<ul class="%2$s">%3$s</ul>';
+    $args['items_wrap']      = '<ul class="%2$s">%3$s</ul>';
-  return $args;
+    return $args;
 }
 
 add_filter( 'wp_nav_menu_args', 'barebones_nav_menu_args' );
 
 
+
 /**
  * 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' );
+    return get_bloginfo( 'name' );
 }
 
 add_filter( 'wp_mail_from_name', 'barebones_mail_from_name' );
 
 
+
 /**
  * Shortcodes ([button] shortcode included)
  */
 
 function button_shortcode( $atts, $content = null ) {
-  return '<a class="btn" href="' . $atts['link'] . '">' . $content . '</a>';
+    $atts['class']  = $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 ) {
-  array_unshift( $buttons, 'styleselect' );
+    array_unshift( $buttons, 'styleselect' );
-  $buttons[] = 'hr';
+    $buttons[] = 'hr';
-  return $buttons;
+    return $buttons;
 }
 
 add_filter( 'mce_buttons_2', 'barebones_mce_buttons_2' );
 
+
 function barebones_tiny_mce_before_init( $settings ) {
-  $style_formats = array(
+    $style_formats = [
-    /* 
+        /* 
-     * Example 
+         * Example 
-     *
+         *
-    array(
+        [
-      'title'    => '',
+          'title'    => '',
-      'selector' => '',
+          'selector' => '',
-      'classes'  => ''
+          'classes'  => ''
-    ) */
+        ] */
-  );
+    ];
-  $settings['style_formats'] = json_encode( $style_formats );
+    $settings['style_formats'] = json_encode( $style_formats );
-  return $settings;
+    return $settings;
 }
 
 add_filter( 'tiny_mce_before_init', 'barebones_tiny_mce_before_init' );
 
 
+
 /**
  * Get image URL for whatever size.
  */
 
 function wp_get_attachment_image_url( $id, $size = 'full', $attrs = []) {
-  $image = wp_get_attachment_image_src( $id, $size, $attrs );
+    $image = wp_get_attachment_image_src( $id, $size, $attrs );
-  return $image[0];
+    return $image[0];
 }
+
+
+
+/**
+ * Custom functions / External files
+ */
+
+require_once( 'functions/example.php' );

functions/example.php

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

gulpfile.js

@@ -0,0 +1,10 @@
+var elixir = require('laravel-elixir');
+
+// The assets path
+elixir.config.assetsPath = 'assets';
+
+// Run elixir tasks
+elixir(function(mix) {
+    mix.sass('barebones.scss', 'styles.css')
+       .scripts(['script.js'], 'js/scripts.min.js');
+});

header.php

@@ -1,29 +1,28 @@
 <!DOCTYPE html>
 <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>
+        <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 bloginfo( 'stylesheet_url' ); ?>">
+        <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
-    <link rel="shortcut icon" href="/favicon.ico">
+        <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.png">
-    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.png">
+        <?php wp_head(); ?>
-    <?php wp_head(); ?>
+        <!--[if lt IE 10]>
-    <!--[if lt IE 10]>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
+        <![endif]-->
-    <![endif]-->
+        <!--[if lt IE 9]>
-    <!--[if lt IE 9]>
+        <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
+        <![endif]-->
-    <![endif]-->
+    </head>
-  </head>
+    <body <?php body_class(); ?>>
-  <body <?php body_class(); ?>>
+        <header class="header" role="banner">
-     <header class="header" role="banner">
+            <div class="container">
-      <div class="container">
+                <nav role="navigation">
-        <nav role="navigation">
+                    <?php wp_nav_menu(['theme_location' => 'header', 'menu_class' => 'nav nav--header']); ?>
-          <?php wp_nav_menu( array( 'theme_location' => 'header' ) ); ?>
+                </nav>
-        </nav>
+            </div>
-      </div>
+        </header>
-    </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 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 +0,0 @@
-!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,44 +1,9 @@
 {
-  "name": "barebones",
+    "private": true,
-  "description": "A lightweight, skeletal, responsive WordPress boilerplate theme for HTML5 and beyond.",
+    "devDependencies": {
-  "version": "2.0.0",
+      "gulp": "^3.8.8"
-  "license": "MIT",
+    },
-  "author": {
+    "dependencies": {
-    "name": "Benchmark",
+      "laravel-elixir": "^3.3.1"
-    "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' 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": {
-    "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"
-  }
-}

script.min.js

@@ -0,0 +1,8 @@
+// var $ = require('jquery');
+
+(function() {
+
+  
+
+})($);
+//# sourceMappingURL=script.min.js.map

script.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["script.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA","file":"script.min.js","sourcesContent":["// var $ = require('jquery');\n\n(function() {\n\n  \n\n})($);"],"sourceRoot":"/source/"}