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
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
- 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
git clone https://github.com/ThoughtwireMedia/thoughtwm.git cd grunterie [sudo] npm install bower install
While you're working on the project, run:
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).
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.scsspulls the styles from
bower_components/foundation/scssincluding a file I added for custom styles (named
custom.scss), theme styles go here
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
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.