This is the demo theme used in my WordCamp LAX 2016 conference talk about using Flexbox with WordPress
- 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
- Clone or download the project onto your
themes
directory(./wp-content/themes)
- From the theme directory, run
npm install
. All of the theme dependencies will be installed intonode_modules
. - Run a find and replace to remove the
wordcamp_lax
slug/string throughout with your project name. - Run
gulp
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.
CSS/Sass Tasks – gulp will compile a compressed CSS and sourcemap file for you.
JavaScript Tasks - gulp will concatenate all of the JavaScript files located in ./assets/js
into a new file named app.js
. It will also create a minified version of the file and place both files in the ./assets/dist/js
directory. Feel free to create as many JS files as you'd like rather than one long one. Gulp also uses the JSLint plugin check for any JavaScript errors for you (code quality). Read about the project here http://www.jslint.com/help.html.
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.
Using the _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 ./assets/sass
.
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 app.css
file.