Heisenberg - Zeek Starter Theme
This is the Zeek Starter theme, based on Underscores and Foundation for Sites, version ^6.2.4.
- Node.js 4.x.x and npm 2.x.x
- Gulp.js - from Terminal 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 Gulp.js. For instance,
sudo npm install -g gulp
How to get started
- Clone or download the project onto your
- From the theme directory, run
npm install. All of the theme dependencies will be installed into
- Run a find and replace to remove the
heisenbergslug/string throughout with your project name.
Gulp will handle Sass compiling, vendor-prefixing, CSS/JS minification and browser reloading. It will watch your Sass, JS and PHP files and will compile when a change is made, inject new CSS after compilation and will reload the browser when your PHP and JS files change.
You have 3 gulp commands that you can use:
gulp serve- will run all of the gulp tasks, watch your files, and start a node server that does auto refreshing and CSS injection
gulp watch- everything in
gulp serveexcept running the node server
gulp- a one-time command that will run your Sass, JS and image tasks
CSS/Sass Tasks – gulp will compile a compressed CSS and sourcemap file for you.
./assets/js into a new file named
What's up with the 'dist' directory? - the
./assets/dist directory is where gulp will send prepared JS and CSS files. The logic behind this is simply a nice segregated place to send and enqueue our files generated by gulp (outputs). That way we can keep our inputs and outputs separated. If you're not a fan and want it to go somewhere else, just adjust the
gulp.dest() paths in the
gulpfile.js for the 'js' and 'styles' tasks. Be sure to adjust your enqueue path in
functions.php as well.
How to use the Foundation Sass files
_settings.scss file, you can overwrite 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
Also, in the
app.scss file, you can remove a Foundation CSS module by commenting out the associated mixin. For instance, if your project doesn't use Foundation's Orbit module, simply comment out the
@include foundation-orbit mixin and the code will never reach your final
Be sure to check Foundation’s docs on using Sass and their mixins for custom control on styles.
Assets + NPM architecture
Our starter theme follows the Codex Template Hierarchy as found on http://codex.wordpress.org/Template_Hierarchy.
Site Front Page -
This project is based off of Automattic's
_s project, based on the distribution zip
generated off of commit