A Wordpress starter theme based on Foundation 5 and Underscores
Please fork, copy, modify, delete, share or do whatever you like with this.
All contributions are welcome!
You'll need to have the following items installed before continuing.
- Sass: Please use Sass 3.3 or 3.2, 3.4 conflicts with Foundation 5.4
- Ruby: Needed for Sass
- Ruby Gems: Used to install Sass
- Node.js: Use the installer provided on the NodeJS website.
- Grunt: Run
[sudo] npm install -g grunt-cli - Bower: Run
[sudo] npm install -g bower
The workflow is setup to create a clean separation from your source code and actual dist version of the theme. I use some grunt tasks as build tools to help accomplish that goal.
The default grunt task will build your dist ready version in a folder called dist in the project's root directory. If you're working localhost and the project is in the wp-content/themes folder you may want rename the project dir (the one you're working in) to something like my-theme-dev and set the rsync dist destination to ../my-theme.
cd my-wordpress-folder/wp-content/themes/
git clone https://github.com/micahblu/wp-foundation.git
mv wp-foundation .wp-foundation
cd .wp-foundation
npm install && bower install
gruntWhen you're ready to generate the actual theme files run: grunt. It will create a dist folder with all the theme files ready to be used as wordpress theme or parent theme.
** Notice that I do mv wp-foundation .wp-foundation. Since you're likely to install the project in your wp-content/themes directory, you'll want to hide the actual project directory from Wordpress, otherwise you may see duplicate themes in appearance/themes once you've run grunt as it will build your actual theme in the theme directory as well as the dist folder.
Check for Foundation Updates? Run:
foundation update
(this requires the foundation gem to be installed in order to work. Please see the docs for details.)
All SASS files are located at src/assets/sass. the default grunt task will genereate a style.css from that for you.
Front End packages are managed by Bower and loaded to src/vendors
See Bower for details
Below is the grunt deploy task configuration, the dist task actually creates a local dist ready version just outside the project root. This allows you to work localhost host and select the theme from the admin. The stage task actaully deploys to a remote server ready to wow adorning fans.
Warning Do not name the dist dest: to the same name as the project dir you're working in, you'll erase your entire working project with dist ready version. Yikes
rsync: {
options: {
args: ["--verbose"],
exclude: [".git*","*.scss","node_modules"],
recursive: true
},
dist: {
options: {
src: "./dist/",
dest: "../wp-foundation/"
}
},
stage: {
options: {
src: "dist/",
dest: "/path/to/wordpress/wp-content/themes/wp-foundation/",
host: "[email protected]"
}
}
}