You may have seen our fearless leader Steve Zehngut’s presentation at WordCamp Orange County last year about how we use Auttomatic’s Underscores and Zurb’s Foundation as the basis for the custom WordPress themes we produce. Since Steve’s WordCamp talk, we’ve continued to iterate our starter theme. We’ve packaged it together and released it on GitHub — please allow us to introduce you to Heisenberg. Now, let’s cook.
This starter theme uses the Sass version of Foundation because it gives you a more robust ability to control your theme not only through Foundation’s presentational classes, but also through its mixins.
How to get started
To get rolling, you’ll need to first install a few dependencies on your machine.
- Install Node.js
- Install Sass
- Install Bower – from Terminal or Command Prompt run
npm install --g bower
- Install Gulp.js – fromTerminal or Command Prompt run
npm install --global gulp
Note: if you run into errors when using Terminal, you may have to use the
sudo command to install Bower or gulp. For instance
sudo npm install -g bower
Clone the theme
Grab a copy of the theme and clone it onto your themes directory of your WordPress install (yoursite/wp-content/themes). You can either download it or use
git clone https://github.com/ZeekInteractive/heisenberg.git
Install Foundation from Bower – from Terminal or Command prompt, run
bower install. Using our bower.json file, bower will fetch the necessary Foundation files along with dependencies.
Install Gulp.js plugins -from Terminal or Command prompt, run
npm install. Using our package.json file, npm will fetch the necessary Gulp.js plugins.
How to use Gulp.js
gulpfile.js file, gulp will handle Sass compiling, vendor-prefixing, CSS minification and browser reloading. It will automate a lot of tedious tasks for us. Magic!
Important: you’ll need to change both the proxy string from
'heisenberg.dev/' to your local URL and the container string from
'heisenberg' to your project name.
Once you’ve adjusted the two strings, from Terminal or Command Prompt run
gulp. Gulp will be watch your sass files and will compile when a change is made. Also, Browser-sync will run and inject new css after compilation and will reload the browser when you php files change.
Minification – gulp will compile a minified and non-minified css file for you. The theme will enqueue the non-minified css file if
WP_DEBUG is set to true in the wp-config.php. It’s generally a good practice to do so anyway when developing themes.
How to use the Sass files
_settings.scss file, you can override a Foundation default style before things get compiled, thereby making your final CSS lighter. To do so, find the variable in the file, uncomment it, and set the value you desire. The file is located in ./assets/sass.
Be sure to check Foundation’s docs on using Sass and their mixins for custom control on styles.
Also be sure to check out how we’ve organized our Sass files using the comments in our