Version: 1.4
John Lauber ( @johnlauber / littlelauberdesigns.com)
WordPress Starter Theme for use as Child Theme of the Genesis Framework for building custom themes, using Bourbon/SCSS and Grunt. Tested with WordPress 3.9.2 (and now 4.0) and Genesis 2.1.2. This is a fork of Matt Banks Starter theme that's using Compass/SCSS.
The theme is setup to use Gulp to compile Bourbon/SCSS, lint, concatenate and minify JavaScript (with source maps), optimize images, and LiveReload the browser (with extension), with flexibility to add any additional tasks via the Gruntfile. Alternatively, you can use CodeKit or whatever else you prefer to compile the SCSS and manage the JavaScript.
Rename folder to your theme name, change the assets/styles/source/style.scss intro block to your theme information. Open the theme directory in terminal and run npm install to pull in all Gulp dependencies. Run gulp to execute tasks. Change theme as you will. If you have the LiveReload browser extension, it will reload after any SCSS or JS changes.
- Compile
assets/styles/source/style.scsstostyle.css - Compile
assets/styles/source/editor-style.scsstoeditor-style.css - Concatenate and minify plugins in
assets/js/vendorandassets/js/source/plugins.jstoassets/js/plugins.min.js - Minify
assets/js/source/main.jstoassets/js/main.min.js - Publish and enjoy the fruits of your labor.
In the gulp.js file, be sure to change the BrowserSync line "local.testing.dev" to your local web address you want to sync.
Bourbon gets loaded as a dependency in package.json and gulp.js. There may be a better way to do this, but I haven’t found it yet.
Supports bower to install and manage JavaScript dependencies in the assets/js/vendor folder.
- Bourbon & SCSS with easy-to-use of mixins ready to go
- Easy to customize
- Grunt and LiveReload to make it more gooder
- Child theme tweaks
- Utilizes PostCSS for browser backwards compatibility
- Utilizes BrowserSync for testing across devices
Requires: bourbon.io
Now with Gulp. I noticed Grunt was starting to fall out of favor, through various blogs and decided I should switchover. So ignore anything that references Grunt and learn to use Gulp.
Updated the theme to utilize the latest changes in the Genesis Sample theme. Cut out any "old stuff". Calling it version 2.0 since I reworked the SCSS files.
Removing the required plugin functionality. SEO plugin is now optional as I'm moving towards SEO Framework and not using Yoast SEO.
Removed some older PostCSS plugins. Added in new dependencies for minimizing and packing the stylesheet.
Moved the Google Font enqueue to the functions file and removed the static resource filter on the CSS files. This was not allowing the enqueueing of the Google fonts. Just replace the string from Google Fonts if using different fonts and change SCSS appropriately.
- With the release Genesis 2.2, I added the accessibility features to the functions and created a new scss partial to hold the latest Genesis Sample additions.
- Minor change to tasks order in GruntFile. BrowserSync starts last instead of first in case there's an error in the other tasks. PostCSS runs immediately after SASS, which seems more logical too.
- Moved all media queries (out of the _genesis.scss partial) to the correct _media.scss partial. It should have been there in the first place.
- Updated plugin activation code with the latest version of TGM Plugin Activation.
- Updated package.json and gruntfile to use new autoprefixer (PostCSS) with flexbox fixer.
- Removed some of the includes from bourbon as they're deprecated.
- Thanks to Matt for the starter
- Changed the grunt file and main style sheet to use Bourbon mixins
- initial version
Without these projects, this WordPress Genesis Starter Child Theme wouldn't be where it is today.