drawbackwards/forward-framework

A killer WordPress theme framework built using underscores, gulp, sass, bourbon neat, bower & browsersync.

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

forward-framework's Issues

404 error on core.js when using Forward-Framework as a parent theme

If you use Forward-Framework as a parent theme then out of the box forward's core.js doesn't load and the child theme will generate a 404 for a non-existent <child-theme>/js/core.js file.

I think this is because FF uses get_stylesheet_directory_uri() rather than get_template_directory_uri().

Relative position of active anchors causes bug in WP Video Lightbox

The generated stylesheet has the following entry.

.header-container,
a:active,
sub,
sup {
position: relative
}

Setting the position of all active anchors to relative causes a very subtle bug in WP Video Lightbox — when you click on the lightbox close button (an anchor element) it moves from the right of the lightbox to the left so the upclick does not happen over the anchor and the associated javascript that closes the lightbox doesn't fire!

I strikes me that changing the position property of just one state is probably a mistake and far too general a rule. I bet there's other subtle bugs too.

Error: Gem sass is not installed

Running gulp build for the first time I get this:

[15:56:32] Starting 'php'...

events.js:142
throw er; // Unhandled 'error' event
^
Error: Gem sass is not installed.

gulp build error

After a fresh install (or several), I keep getting an error on the first gulp build: https://cloudup.com/c7Tg-AETE39

???
Help?

gulp version mismatch

Running gulp build I get a "gulp version mismatch".

$ gulp build
[15:56:27] Warning: gulp version mismatch:
[15:56:27] Global gulp is 3.9.1
[15:56:27] Local gulp is 3.8.11

I assume it's because the local version is pinned at 3.8.11 and the global install isn't.

JS function error

Hey, thanks for addressing issue-2!

I'm seeing one other error when I set up a fresh install. During the gulp build process I get this message: src/js/core.js: line 27, col 14, 'setMobileMenuHeight' was used before it was defined.

( for full context https://cloudup.com/cG1D_1Sjq_V )

Are you seeing that too?