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
- Open
gulpfile.js
and modify theproject
andurl
variables accordingly. - 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
- Activate theme at
[localhost]/wp-admin/themes.php
- 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.