HTML5 Base Wordpress Theme

Published Tuesday 3rd of January 2012

Like so many others I've now also written my own HTML5 starter theme for Wordpress.

It's based on the Bones Wordpress Theme which is based on the HTML5 Boilerplate.

A few things I've changed from Bones:

  • Removed all the class names from the markup (clearfix in particular)
  • Removed all the CSS but normalize + some mixins (you're meant to style the site yourself)
  • "Modularized" the code (each module is contain within its own file rather than all the modules for one page being in one file)
  • Went through every line of code in every file and tidied things up

The theme comes with some widget areas and menu spots but you'll most likely wanna change them for your own site. It also supports post thumbnails and attachments (the plugin) support is on its way.

This is actually version 2 of this theme. The first version was based on I think the Kubrick theme from I dunno, before 3.0 anyway, so I felt it was time to brush things up and enable some new features.

I've also studied best practice theme development articles and spent time in the Wordpress "codex" trying to figure out the fucking mess that Wordpress is to make sure this theme is as robust as possible.

It's mainly written for myself but of course anyone is free to use it.

Tags
Comments
4 comments

Bookmark this Article

  • del.icio.us
  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • Blinklist
  • Blogmarks
  • Rojo
  • Stumbleupon

Comments

  1. Joe

    Published Saturday 11th of February 2012

    Hi Andreas.

    Did you ever publish your HTML5 theme based on Bones? I hit the link in the article to the upload site on Google code but there weren't any files to download. I initially liked Bones a lot and I was using it to develop a project but dropped it because the CSS was way too messy and hard to work with. I rolled my own solution but I am still not entirely happy with it. I saw your post about your starter theme and thought it might be just what I am looking for. Let me know if you ever publish it. I'd like to take a look. Best Wishes.

    Joe

  2. Andreas

    Published Saturday 11th of February 2012

    @Joe - There's no actual download but you can easily get your hands on the code by doing this in a terminal:

    $ svn export http://html5base.googlecode.com/svn/trunk/ html5base

    Chances are you might not like my CSS either but it's safe to delete the entire directory and just work with the templates and JS (or delete the JS too if you want to write that from scratch as well).

    The templates are HTML5, semantic and design-free so they're a nice start anyway.

  3. Joe

    Published Sunday 12th of February 2012

    OK. I got the code. Wow! When you said "heavily modified" you weren't kidding. I was looking for a reason to learn SASS and I guess I found one. Seriously, this was an incredible effort on your part. Thanks for making it available.

  4. Andreas

    Published Sunday 12th of February 2012

    @Joe - Thanks :) SASS is totally awesome and I can't imagine writing CSS without it any more.

Post a Comment

Random jQuery Plug-ins

  • Togglable DL

    Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semant...

    Details

  • Numeric DL

    This tiny plug-in numbers definitions in a definition-list if there are more than one definition for a term. Can be useful for FAQs, actual lists of d...

    Details

  • Center

    This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.

    Details

More Plug-ins

Page cached. Loaded in: 0.1046 second(s).
Last DB change: 2012-02-19 09:46:01
Last file change: 2011-10-03 07:42:35
Cache created: 2012-02-22 15:29:47