Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A starter boilerplate theme for Wordpress containing a few extras to help get more involved themes up and running.

branch: master

Added the option to use the grid or not. _layout.scss can be overwrit…

…ten and recompiled to suit needs, or just copied into child theme and overridden in there
latest commit 173b511b04
Joel Oliveira authored January 19, 2011
Octocat-spinner-32 images grid integrated w/compass and susy (http://susy.oddbird.net/tutorial/) November 24, 2010
Octocat-spinner-32 js added modernizr to the js stack November 29, 2010
Octocat-spinner-32 sass Added the option to use the grid or not. _layout.scss can be overwrit… January 19, 2011
Octocat-spinner-32 .gitignore adding AppleDouble to gitignore, fixing body_class filter November 30, 2010
Octocat-spinner-32 404.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 README.mkdn wrapping markup in code tags - README December 03, 2010
Octocat-spinner-32 archive.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 archives.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 comments-popup.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 comments.php comments.php was an absolute mess. mostly cleaned up with fresh html5… December 20, 2010
Octocat-spinner-32 config.rb grid integrated w/compass and susy (http://susy.oddbird.net/tutorial/) November 24, 2010
Octocat-spinner-32 footer.php adding more options for the footer December 10, 2010
Octocat-spinner-32 functions.php Added the option to use the grid or not. _layout.scss can be overwrit… January 19, 2011
Octocat-spinner-32 header.php moving search to main nav per twitter discussion with @mikesusz, @cir… December 09, 2010
Octocat-spinner-32 ie.css adding readme to project December 03, 2010
Octocat-spinner-32 index.php grid integrated w/compass and susy (http://susy.oddbird.net/tutorial/) November 24, 2010
Octocat-spinner-32 links.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 page.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 print.css adding readme to project December 03, 2010
Octocat-spinner-32 screenshot.png more up to date screenshot August 04, 2010
Octocat-spinner-32 search.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 searchform.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 sidebar-footer.php First commit. header, footer, sidebars, index page started August 04, 2010
Octocat-spinner-32 sidebar-left.php more markup changes to use better, newer semantic tags August 08, 2010
Octocat-spinner-32 sidebar-right.php First commit. header, footer, sidebars, index page started August 04, 2010
Octocat-spinner-32 single.php comments.php was an absolute mess. mostly cleaned up with fresh html5… December 20, 2010
Octocat-spinner-32 style.css Added the option to use the grid or not. _layout.scss can be overwrit… January 19, 2011
README.mkdn

Yet another HTML5 Boilerplate Wordpress theme - with a twist

This is a very stripped down wordpress theme that hopes to fill in a niche that, from our experience, hasn't been fully realized. If we're going to future-proof our wordpress themes with HTML5 and CSS3 let's not stop at just integrating Paul Irish and Divya Manian's Boilerplate or marking up with all the new HTML5 tags, let's use something like SASS/SCSS, Compass, and the Susy grid framework to facilitate easier and faster stylesheet authoring. The goal of this experiment is to pull in the best open source tools to help us work with wordpress theming.

What do I need to get started with this theme?

  • Compass
  • The Susy grid framework

The above are all gems and depend on ruby and rubygems being installed. If you do not have ruby and rubygems installed, visit http://www.ruby-lang.org/en/ and http://rubygems.org/ to get started. To determine if you have them installed:

which ruby
which gem

If either of those two do not return a path to the binary, you'll need to install them.

To install compass and susy (if you are using RVM you won't need to sudo the following commands) :

sudo gem install compass --pre
sudo gem install compass-susy-plugin

You should have the necessary dependencies installed and are now ready to clone this to your wordpress project.

git clone git://github.com/jayroh/html5_boilerplate_wordpress.git /path/to/project/wp-content/themes/html5_boilerplate

And most importantly - to compile the changes you make in the theme's SCSS files, located in wp-content/themes/html5_boilerplate/sass/*, you may continually watch for changes :

compass watch /path/to/project/wp-content/themes/html5_boilerplate

The above will compile to wp-content/themes/html5_boilerplate/style.css with comments detailing the line in the SCSS where that was defined. For production purposes, or just for cleanliness's sake, to forcefully compile in a compact format, without the line comments :

compass compile /path/to/project/wp-content/themes/html5_boilerplate -s compact --force --no-line-comments

To see more options just run compass help

Anatomy of this theme

  • As mentioned above, the html5 boilerplate project (https://github.com/paulirish/html5-boilerplate) serves as the basis for the markup and stylesheet as much as possible. The one exception that stands out is that javascript is still included within <head/> by default instead of just before </body>.
  • The latest versions of Modernizr, DD_belatedPNG and jQuery.
  • CSS has been split up into partials using the SCSS formatting method instead of traditional SASS. All partials can be found in html5_boilerplate/sass/partials.
  • In addition to base font variables, style.scss contains grid-related variables that will drive how we layout the theme. Currently the default is a 16 column grid (for a 960px wide grid), but you will also find a 12 column grid commented out above.
  • functions.php does some light housekeeping as well as additional options under Appearance > More Theme Options for turning on/off and setting up multiple sidebars (left, right, footer).

Further Reading

We highly recommend looking through the documentation for all the projects that helped make this theme what it is :

Many Thanks To

Paul Irish, Divya Manian, Faruk Ates, Chris Eppstein, the OddBirds - Carl Meyer, Eric Meyer and Jonny Gerig Meyer - thank you all for your hard work!

Contact

This is by no means done and we would LOVE feedback - pull requests, patches, additions, anything.

Thank you.

Joel Oliveira @jayroh and Mike Susz @mikesusz

Something went wrong with that request. Please try again.