Forward Framework

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.

Where Do I Put This?

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 [email protected]: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/

Modify Project Variables

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).

Install Gulp Globally

$ npm install --global gulp

Install Yarn (preferred over npm)

# Using homebrew
$ brew update
$ brew install yarn

# OR using npm
$ npm install -g yarn

For additional methods see the yarn install page.

Install Gulp Plugins / Dependencies

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

# OR use npm
$ npm install

Install Bower & Components

$ npm install -g bower
$ bower install

Install sass

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.

Generate Theme Files

This will generate the initial theme files in build/.

$ gulp build

Activate Theme & Create a Navigation Menu

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.

Project Commands

gulp build

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

$ gulp build

gulp

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

$ gulp

gulp dist

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

License

• Licensed under the GPLv3.

Credits

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