A killer WordPress theme framework built using underscores, gulp, sass, bourbon, bourbon neat, bower & browsersync. This project is also available as a pre-compiled WordPress starter theme.

Clone/Fork/Download this project wherever you like and symlink build/ to wp-content/themes/[example-theme].

Note: Values [inside-brackets] can be changed.

$ git clone git@github.com:drawbackwards/Forward-Framework.git ~/[Sites]/[forward-framework]

$ cd ~/Sites/[example-wordpress-install]/wp-content/themes/

$ ln -s ~/Sites/forward-framework/build [example-theme]

Your themes directory should now look like this:

`- wp-content/
  |- plugins/
  `- themes/
    |- example-theme -> ~/Sites/forward-framework/build
    `- twentyfifteen/

1. Open gulpfile.js and modify the project and url variables accordingly.
2. MAMP Users: Enable the port 8888 parameter for BrowserSync (Search for 'Port setting for MAMP users' in gulpfile.js).

$ npm install --global gulp

# Using homebrew
$ brew update
$ brew install yarn

# OR using npm
$ npm install -g yarn

For additional methods see the yarn install page.

$ cd ~/Sites/forward-framework/
$ yarn

# OR use npm
$ npm install

$ npm install -g bower
$ bower install

Sass is a Ruby component (known as a gem). If you're a Mac user Ruby is already on your system but if you're developing on Linux or Windows you may have to install it. Once you've got Ruby you should be able to install sass from the command line (you may need to use sudo).

$ gem install sass

For troubleshooting see the sass install page.

This will generate the initial theme files in build/.

$ gulp build

1. Activate theme at [localhost]/wp-admin/themes.php
2. Create a new menu at [localhost]/wp-admin/nav-menus.php and assign to the Primary Menu Theme location.

Running gulp build will generate/rebuild the build/ directory without starting a watch process.

$ gulp build

Running gulp or gulp watch will start the watch process & browser-sync. Changes to src/ are written to build/.

$ gulp

Running gulp dist will generate an optimized, production ready version of the theme based on build/. This will be the folder you deploy to production.

$ gulp dist

• Licensed under the GPLv3.

• Underscores
• Alexander Synaptic
• CSScomb
• Gulp
• Sass
• Bourbon
• Bourbon Neat
• Bower
• Browsersync
• Autoprefixer
• Normalize