This is a Compass / Sass adaptation of the HTML5 Wordpress Theme which is a blank theme based on the HTML5 Reset templates. It's a great empty slate upon which to build your own HTML5-based Wordpress themes with the benefits of Compass and Sass.
In addition to all the standard Wordpress elements and classes, we have added the code required so that the single post template conforms with the hNews microformat.
- A style sheet designed to strip initial files from browsers, meaning you start off with a blank slate.
- Easy to customize -- remove whatever you don't need, keep what you do.
- Analytics and jQuery snippets in place
- Meta tags ready for population
- Empty mobile and print style sheets, including blocks for device orientation
- Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
- IE-specific classes for simple CSS-targeting
- iPhone/iPad/iTouch icon snippets
- Lots of other keen stuff...
Sass stylesheets are stored in _/stylesheets and output to /style.css
style.sass is made up of a number of key partials
- Base - see Compass best practices (http://compass-style.org/help/tutorials/best_practices/)
- HTML5 Reset - Sass version of HTML5 Reset Templates (https://github.com/murtaugh/HTML5-Reset)
- Mixins - Don't repeat yourself, use sass mixins (http://sass-lang.com/)
- Print - Print styles
- Media - Responsive web design styles
Added selectivizr.js and DOMAssistant.js for further IE support
Changed TEMPLATEPATH to bloginfo('template_url') - absolute path wasn't working on my server
- Download or clone the repo into your-site/wp-content/themes/ folder
- Open Terminal
- Run $ gem install compass
- Open Terminal and navigate to your-site/wp-content/themes/HTML5-Reset-Compass-Sass-Wordpress-Theme/
- Run $ compass watch
- Open your-site/wp-content/themes/HTML5-Reset-Compass-Sass-Wordpress-Theme/_/stylsheets in your favourite text editor (Textmate?)
- Code away…
This is built using .sass however can easily be converted to .scss if you prefer.