A Gruntified version of Reverie, a versatile HTML5 responsive WordPress framework based on ZURB's Foundation.
CSS PHP Other
Pull request Compare This branch is 35 commits ahead, 31 commits behind gpspake:master.
Permalink
Failed to load latest commit information.
bower_components non-recalled styling refinements to SASS Dec 23, 2014
css non-recalled styling refinements compiled to CSS Dec 23, 2014
img/devices Add grunterie stuff Apr 9, 2014
js working version of 5.4.3 with Compass and Grunt! Sep 15, 2014
lib customize head cleanup Oct 21, 2014
node_modules add bower_components and node_modules to repo Oct 20, 2014
partials add HTML sitemap and useful 404 page Oct 21, 2014
scss compile css in compact for before uploading to site Oct 21, 2014
.bowerrc Create .bowerrc Nov 26, 2013
.gitignore remove directives blocking bower and grunt from git so repo is complete Oct 20, 2014
.jshintrc working version of 5.4.3 with Compass and Grunt! Sep 15, 2014
404.php improved the 404 error page to have site search and a sitemap Dec 23, 2014
Gruntfile.js output css in compact to ensure it is readable and small, just in cas… Sep 15, 2014
README.md bring README.md up to date Feb 1, 2015
archive.php Reverie Apr 8, 2014
bbpress.php Reverie Apr 8, 2014
bower.json working version of 5.4.3 with Compass and Grunt! Sep 15, 2014
comments.php Reverie Apr 8, 2014
config.rb output css in compact to ensure it is readable and small, just in cas… Sep 15, 2014
content-none.php Reverie Apr 8, 2014
content.php Reverie Apr 8, 2014
favicon.png Update favicon Apr 9, 2014
footer.php config setting updates Aug 26, 2014
front-page.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
functions.php add HTML sitemap and useful 404 page Oct 21, 2014
header-banner.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
header-front.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
header.php add HTML sitemap and useful 404 page Oct 21, 2014
humans.txt bring README.md and humans.txt up to date Feb 1, 2015
index.html update jquery path Feb 18, 2014
index.php Reverie Apr 8, 2014
package.json working version of 5.4.3 with Compass and Grunt! Sep 15, 2014
page-banner.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
page-full-banner.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
page-full.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
page-sitemap.php improved functionality of HTML sitemap Dec 23, 2014
page.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
robots.txt Create robots.txt Jan 10, 2014
screenshot.png Add grunterie stuff Apr 9, 2014
search.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
searchform.php Reverie Apr 8, 2014
sidebar.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
single.php correct headers, banners, page templates, classes, urls, alt text Oct 21, 2014
style.css Add grunterie stuff Apr 9, 2014

README.md

Grunterie - Working with Foundation 5.4.3

This is a customized fork of Grunterie is a WordPress theme based on Reverie, a "versatile HTML5 responsive WordPress framework based on ZURB's Foundation." Reverie is set up to use the Compass gem to compile SCSS. With this version of Grunterie you still use Compass but the compilation and watching is handled via Grunt (or Compass).

NOTE: Disregard the instructions below the double lines (2 horizontal rules). After trying to use this theme following those instructions, it failed. As such, I added all the Node and Bower dependencies to this repo. Instead of installing anything:

  • fork this repo 'as-is'
  • make sure you have the exact specified versions of Sass/Compass installed
  • make it rain

It seems Foundation did not aniticipate anyone not wanting to use libsass but wanting to use Grunt...it's taken me dozens of hours to get a fully working copy; consider that a word of warning before you type bower update.

You can always use Sass with a Compass project but not the other way around. Plus, there's some pretty slick stuff that Compass does and that "plays nice" with it like: the SCSS syntax snippets that the Colorzilla CSS3 gradient generator spits out and Effeckt.css.

I'm creating this for my own website (so you can probably see it in action there) and as a starting point for client projects.

Uses Grunt for task automation and quality assurance but my primary concerns are actually performance (very few HTTP requests compared to the average WordPress site due to concatenation and minification of files).

  • Built with Foundation 5.4.3 (minor changes to size of layout, color scheme and typography rules. all are readily apparent when viewing settings.scss)
  • Includes all the great features in Reverie (Really, I didn't change much)
  • Ready out-of-the-box if you don't want to bother with SASS
  • Built using the instructions in the Foundation docs
  • Takes full advantage of Grunt (more to come, I'm just glad it's working)
  • Update Foundation any time with foundation update (Requires Foundation gem--be careful before you do this)
  • Built to compile SCSS with Compass by default
  • Uses my favorite parts of the fantastic Roots Theme (relative URLs included but not working)
  • Automatically downloads my favorite WordPress plugins
  • Includes WAI-Aria role attributes (helps accessiblity)
  • Added Schema.org semantic web markup
  • Internationalized quote marks inserted via CSS
  • Built with web performance and security considerations (no version number query strings)
  • Includes SVG social media icons for a few of the most popular services

Some things that a developer might expect to be dynamic (charset, language, some assets) are hard-coded to cut down on database queries an improve performance.

While I build sites with international users and accessibility in mind, I have never worked on a non-English site and I always encode in UTF-8 so I added those attributes to the source code rather than as database queries.



Requirements (see note above)

Should be ready to use but that being said, if you want to customize the theme with SASS using lib-sass or Compass instead of writing vanilla css, you'll still need to follow the directions below.

You'll need to have the following items installed before continuing.

  • 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

Quickstart

git clone https://github.com/ThoughtwireMedia/thoughtwm.git
cd grunterie
[sudo] npm install
bower install

Dec 2014: If you use Homebrew be advised that there is a new recommended way of installing (and updating) Node via Homebrew.

While you're working on the project, run:

grunt

As noted above, I had a heck of a time getting it to work right...not entirely sure why but based on some discussions in support forums (and some notes on the project page for grunt-contrib-compass) I ended up uninstalling and re-installing Compass and Sass.


Sept. 15 2014 - It's working for me with Sass 3.4.0 and Compass 1.0.1...I've read that npm install shouldn't require sudo but it always does for me, bower install doesn't (modified, see update from Dec 2014, supra).


Directory Structure

  • scss/_settings.scss: Foundation configuration settings go in here
  • scss/app.scss: Application styles go here (Probably no need to mess with this.)
  • scss/app.scss pulls the styles from bower_components/foundation/scss including a file I added for custom styles (named custom.scss), theme styles go here

Using Compass

Grunterie uses the grunt-compass-contrib plugin.

To use Compass, you'll need to make sure the compass gem is installed (gem install compass).

After that, just run grunt

Production sites should have the compass task settings in Gruntfile.js toggled accordingly. One of the required plugins, Piklist, does something weird to menus (it wraps the 'title' attributes of the links in spans which then become visible and look ridiculous) so I always go into the plugin itself /wp-content/plugins/piklist/includes/class-piklist-menu.php and comment out a few lines towards the end of the file, currently lines 75-82.

I use Grunt and the Compass settings in Gruntfile.js for normal watch and compilation tasks (including LiveReload) but I actually use compass compile and the configurations in config.rb for more granular control over the level of minification and if there are source file comments in the output CSS.