Space Advocates

Version: 1.0

Contributors:

Joe Spens, Senior Web Developer
Rhett Forbes, Senior UI Designer
John Zeller, Founder and Executive Director

Summary

WordPress Theme for use on the main Space Advocates website. Uses Compass/SCSS, HTML5 Boilerplate 4 with Modernizr and Normalize.css, and Grunt for all tasks. Tested with WordPress 3.5.1.

Usage

The theme is setup to use Grunt to compile Compass/SCSS, lint, concatenate and minify JavaScript (with source maps), optimize images, desktop notifications with Bower, and LiveReload the browser (with extension), with flexibility to add any additional tasks via the Gruntfile.

Dependencies

These are tools you will need to have on your machine to run the project. If you're on a Mac, Ruby should already be installed.

Ruby

Download and install Ruby.
[sudo] gem install bundler to install the Ruby package manager.

Node

Download and install Node.
The package bundler npm should already be installed with Node. If you are running Mac OSX, I would recommend installing Homebrew (the missing Node package manager) by running this in terminal. ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Git

Download and install Git.
You can set up user information here.

Installation

Download, install, and update the latest version of Wordpress.
Navigate to /wp-content/themes/ in terminal.
git clone git@github.com:SpaceAdvocates/SpaceAdvocatesWebsite.git to clone the repository (then activate the theme in the WordPress Dashboard).
npm install to install Grunt, its tools, and all other node modules.
grunt to execute tasks.
Code as you will.

If you have the LiveReload browser extension, it will reload after any SCSS or JS changes. If you have Mac OS 10.8 (Mountain Lion) then you will receive desktop notifications when Grunt tasks run.

To optimize images, run grunt imagemin.

These tasks:

Compile assets/scss/style.scss to style.css (all paths defined in config.rb for Compass)
Concatenate and minify all plugins in assets/js/vender and assets/js/source/plugins.js to assets/js/plugins.min.js
Concatenate and minify all scripts in assets/js/source and assets/js/source/main.js to assets/js/main.min.js

Deployment

The theme includes deployments via grunt-rsync. The Gruntfile includes setups for staging and production - run grunt rsync:staging or grunt rsync:production to deploy your files via rsync.

Structure

assets
- fonts
- images
- js
  - source - Custom written project scripts
  - vendor - 3rd party plugins and librires
  - map - Contains source maps for minified asset files
  - main.min.js - Compiled source scripts
  - plugins.min.js - Compiled plugins
- scss
  - layouts - Files for layouts and page specific styles
  - libraries - Vendor libraries
  - modules - Partial Sass files for page elements
  - _buttons.scss - Button styles
  - _config.scss - Sass configuration file for project variables
  - _fonts.scss - Includes all font-face styles
  - _misc.scss - Project styles
  - _mixins.scss - Project mixins
  - _normalize.scss - Normalize.css for font reset
  - style.scss - Main file which includes all other partials. It's the only one that is compiled
dumps - Sample WordPress database dumps used for development environments only. Not included in Production
lib - [ WordPress Theme Library Files ]
templates - [ WordPress Theme Content Template Files ]
[ WordPress Theme Files ]
config.rb - Compass configuration for Grunt tools
Gruntfile.js - Used by Grunt
grunt-settings.json - Used by Gruntfile.js to access user information
package.json - Used by Grunt
README.md

josephspens / SpaceAdvocatesWebsite