From d0ef06c80a59584afef413ff4e97a3a40163c052 Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Thu, 6 Feb 2014 15:16:07 +0000 Subject: [PATCH] gulp integration --- .gitignore | 3 +-- Gruntfile.js | 37 --------------------------- README.md | 21 ++++++++-------- all.js | 5 ++++ all.min.js | 1 + css/_vars.scss | 15 +---------- css/generic/_normalise.scss | 26 +------------------ css/generic/_utilities.scss | 4 +-- css/objects/_forms.scss | 15 +++++------ css/objects/_scaffolding.scss | 3 --- css/style.scss | 1 - footer.php | 2 +- functions.php | 2 +- gulpfile.js | 47 +++++++++++++++++++++++++++++++++++ js/script.js | 12 +++------ package.json | 11 -------- script.js | 5 ++++ style.css | 2 +- 18 files changed, 86 insertions(+), 126 deletions(-) delete mode 100644 Gruntfile.js create mode 100644 all.js create mode 100644 all.min.js create mode 100644 gulpfile.js delete mode 100644 package.json create mode 100644 script.js diff --git a/.gitignore b/.gitignore index c2c5039..b8619fb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ .sass-cache/* -node_modules/* -css/example.css \ No newline at end of file +node_modules/* \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 748c27e..0000000 --- a/Gruntfile.js +++ /dev/null @@ -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']); - -}; \ No newline at end of file diff --git a/README.md b/README.md index 8ff58a1..80e815c 100644 --- a/README.md +++ b/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`~~ diff --git a/all.js b/all.js new file mode 100644 index 0000000..d371c33 --- /dev/null +++ b/all.js @@ -0,0 +1,5 @@ +;(function($) { + + + +})(jQuery); \ No newline at end of file diff --git a/all.min.js b/all.min.js new file mode 100644 index 0000000..9e870ae --- /dev/null +++ b/all.min.js @@ -0,0 +1 @@ +!function(){}(jQuery),!function(){}(jQuery),function(){}(jQuery); \ No newline at end of file diff --git a/css/_vars.scss b/css/_vars.scss index e366080..a7df101 100755 --- a/css/_vars.scss +++ b/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; \ No newline at end of file +// Custom colours etc. \ No newline at end of file diff --git a/css/generic/_normalise.scss b/css/generic/_normalise.scss index febabd4..aadc90d 100755 --- a/css/generic/_normalise.scss +++ b/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%; } \ No newline at end of file diff --git a/css/generic/_utilities.scss b/css/generic/_utilities.scss index 0d6bd18..ffefbc2 100755 --- a/css/generic/_utilities.scss +++ b/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; diff --git a/css/objects/_forms.scss b/css/objects/_forms.scss index 54956c0..1c2e3fc 100755 --- a/css/objects/_forms.scss +++ b/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; - } } \ No newline at end of file diff --git a/css/objects/_scaffolding.scss b/css/objects/_scaffolding.scss index 99b706f..41c3555 100755 --- a/css/objects/_scaffolding.scss +++ b/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%; } } \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 7b49d8a..55cced8 100755 --- a/css/style.scss +++ b/css/style.scss @@ -19,5 +19,4 @@ Author: Mike Francis @import 'objects/forms'; @import 'objects/scaffolding'; -@import 'objects/scaffolding'; @import 'objects/nav'; \ No newline at end of file diff --git a/footer.php b/footer.php index 6bc27dc..c2bf192 100755 --- a/footer.php +++ b/footer.php @@ -5,4 +5,4 @@ - + \ No newline at end of file diff --git a/functions.php b/functions.php index 5aa6cfb..c6c95dd 100644 --- a/functions.php +++ b/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' ); diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..7532b28 --- /dev/null +++ b/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']); \ No newline at end of file diff --git a/js/script.js b/js/script.js index 057ac86..39d54d5 100755 --- a/js/script.js +++ b/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); \ No newline at end of file diff --git a/package.json b/package.json deleted file mode 100644 index 3553817..0000000 --- a/package.json +++ /dev/null @@ -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" - } -} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..39d54d5 --- /dev/null +++ b/script.js @@ -0,0 +1,5 @@ +;(function($) { + + // JS goes here + +})(jQuery); \ No newline at end of file diff --git a/style.css b/style.css index 42a95a2..03ddc69 100644 --- a/style.css +++ b/style.css @@ -1 +1 @@ -*{border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold}q:before,q:after{content:''}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,ul,ol{margin-bottom:24px}h1{font-size:28px;font-size:1.75rem}h2{font-size:24px;font-size:1.5rem}h3{font-size:21px;font-size:1.3125rem}h4{font-size:18px;font-size:1.125rem}h5{font-size:16px;font-size:1rem}h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;max-width:100%;height:auto}.alignleft{float:left}img.alignleft{margin-right:20px}.alignright{float:right}img.alignright{margin-left:20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.clearfix,.form__controls,.container,.container--fluid,.row{*zoom:1}.clearfix:before,.form__controls:before,.container:before,.container--fluid:before,.row:before,.clearfix:after,.form__controls:after,.container:after,.container--fluid:after,.row:after{content:" ";display:table}.clearfix:after,.form__controls:after,.container:after,.container--fluid:after,.row:after{clear:both}input,select,textarea{background:#fff;border:solid 1px #ccc;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6 12;width:208px}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__label{font-weight:bold}.btn{background:#eee;border:solid 1px #ccc;color:#333;cursor:pointer;display:inline-block;line-height:48px;height:48px;padding:0 24;width:auto}.btn:hover{background:#ddd}.container{margin:0 auto;max-width:940px;padding:0 20px}.container--fluid{width:100%}.row{margin-left:-2.08333%;_overflow:hidden}@media screen and (max-width: 640px){.row{margin-left:0}}.column{display:inline;float:left;margin-left:2.08333%;vertical-align:top}@media screen and (max-width: 640px){.column{display:block;float:none;margin-left:0;width:auto !important}}.col-span-1{width:6.25%;*width:6.23%}.col-span-2{width:14.58333%;*width:14.56333%}.col-span-3{width:22.91667%;*width:22.89667%}.col-span-4{width:31.25%;*width:31.23%}.col-span-5{width:39.58333%;*width:39.56333%}.col-span-6{width:47.91667%;*width:47.89667%}.col-span-7{width:56.25%;*width:56.23%}.col-span-8{width:64.58333%;*width:64.56333%}.col-span-9{width:72.91667%;*width:72.89667%}.col-span-10{width:81.25%;*width:81.23%}.col-span-11{width:89.58333%;*width:89.56333%}.col-span-12{width:97.91667%;*width:97.89667%}.row--no-gutters .column{margin-left:0}.row--no-gutters .column-span-1{width:8.33333%;*width:8.31333%}.row--no-gutters .column-span-2{width:16.66667%;*width:16.64667%}.row--no-gutters .column-span-3{width:25%;*width:24.98%}.row--no-gutters .column-span-4{width:33.33333%;*width:33.31333%}.row--no-gutters .column-span-5{width:41.66667%;*width:41.64667%}.row--no-gutters .column-span-6{width:50%;*width:49.98%}.row--no-gutters .column-span-7{width:58.33333%;*width:58.31333%}.row--no-gutters .column-span-8{width:66.66667%;*width:66.64667%}.row--no-gutters .column-span-9{width:75%;*width:74.98%}.row--no-gutters .column-span-10{width:83.33333%;*width:83.31333%}.row--no-gutters .column-span-11{width:91.66667%;*width:91.64667%}.row--no-gutters .column-span-12{width:100%;*width:99.98%}.container{margin:0 auto;max-width:940px;padding:0 20px}.container--fluid{width:100%}.row{margin-left:-2.08333%;_overflow:hidden}@media screen and (max-width: 640px){.row{margin-left:0}}.column{display:inline;float:left;margin-left:2.08333%;vertical-align:top}@media screen and (max-width: 640px){.column{display:block;float:none;margin-left:0;width:auto !important}}.col-span-1{width:6.25%;*width:6.23%}.col-span-2{width:14.58333%;*width:14.56333%}.col-span-3{width:22.91667%;*width:22.89667%}.col-span-4{width:31.25%;*width:31.23%}.col-span-5{width:39.58333%;*width:39.56333%}.col-span-6{width:47.91667%;*width:47.89667%}.col-span-7{width:56.25%;*width:56.23%}.col-span-8{width:64.58333%;*width:64.56333%}.col-span-9{width:72.91667%;*width:72.89667%}.col-span-10{width:81.25%;*width:81.23%}.col-span-11{width:89.58333%;*width:89.56333%}.col-span-12{width:97.91667%;*width:97.89667%}.row--no-gutters .column{margin-left:0}.row--no-gutters .column-span-1{width:8.33333%;*width:8.31333%}.row--no-gutters .column-span-2{width:16.66667%;*width:16.64667%}.row--no-gutters .column-span-3{width:25%;*width:24.98%}.row--no-gutters .column-span-4{width:33.33333%;*width:33.31333%}.row--no-gutters .column-span-5{width:41.66667%;*width:41.64667%}.row--no-gutters .column-span-6{width:50%;*width:49.98%}.row--no-gutters .column-span-7{width:58.33333%;*width:58.31333%}.row--no-gutters .column-span-8{width:66.66667%;*width:66.64667%}.row--no-gutters .column-span-9{width:75%;*width:74.98%}.row--no-gutters .column-span-10{width:83.33333%;*width:83.31333%}.row--no-gutters .column-span-11{width:91.66667%;*width:91.64667%}.row--no-gutters .column-span-12{width:100%;*width:99.98%}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block} +* {border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}th {font-weight:bold;text-align:left;}address ,caption ,cite ,dfn ,th ,var {font-style:normal;font-weight:normal;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 {font-size:100%;font-weight:bold;}q:before ,q:after {content:'';}html {background-color:#fff;color:#444;font:100%/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;}a {color:#444;text-decoration:none;}h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p ,ul ,ol {margin-bottom:24px;}ul ,ol {margin-left:24px;}ul ul ,ol ol {margin-bottom:0;}img {display:block;height:auto;max-width:100%;}.alignleft {float:left;}img.alignleft {margin-right:20px;}.alignright {float:right;}img.alignright {margin-left:20px;}.aligncenter {display:block;margin-left:auto;margin-right:auto;}.clearfix:before ,.clearfix:after {content:'';display:table;line-height:0;}.clearfix:after {clear:both;}input ,select ,textarea {background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6 12;width:208px;}input[type="checkbox"] ,input[type="radio"] {background:transparent;border:0;width:auto;}textarea {min-height:96px;}.form__group {margin-bottom:24px;}.form__label {font-weight:bold;}.btn {background-color:#fff;border:solid 1px #444;color:#444;cursor:pointer;display:inline-block;height:48px;line-height:48px;padding:0 24;width:auto;}.container {margin:0 auto;max-width:940px;padding:0 20px;}.container--fluid {width:100%;}.row {margin-left:-2.08333%;}@media screen and (max-width: 640px){.row {margin-left:0;}}.column {display:inline;float:left;margin-left:2.08333%;vertical-align:top;}@media screen and (max-width: 640px){.column {display:block;float:none;margin-left:0;width:auto !important;}}.col-span-1 {width:6.25%;}.col-span-2 {width:14.58333%;}.col-span-3 {width:22.91667%;}.col-span-4 {width:31.25%;}.col-span-5 {width:39.58333%;}.col-span-6 {width:47.91667%;}.col-span-7 {width:56.25%;}.col-span-8 {width:64.58333%;}.col-span-9 {width:72.91667%;}.col-span-10 {width:81.25%;}.col-span-11 {width:89.58333%;}.col-span-12 {width:97.91667%;}.row--no-gutters .column {margin-left:0;}.row--no-gutters .column-span-1 {width:8.33333%;}.row--no-gutters .column-span-2 {width:16.66667%;}.row--no-gutters .column-span-3 {width:25%;}.row--no-gutters .column-span-4 {width:33.33333%;}.row--no-gutters .column-span-5 {width:41.66667%;}.row--no-gutters .column-span-6 {width:50%;}.row--no-gutters .column-span-7 {width:58.33333%;}.row--no-gutters .column-span-8 {width:66.66667%;}.row--no-gutters .column-span-9 {width:75%;}.row--no-gutters .column-span-10 {width:83.33333%;}.row--no-gutters .column-span-11 {width:91.66667%;}.row--no-gutters .column-span-12 {width:100%;}.nav {list-style:none;margin:0;}.nav>li {display:inline-block;}.nav > li>a {display:block;} \ No newline at end of file