Gal Segal's Blog

Thoughts of a programmer with a soul

Dec 14

New Blank WordPress HTML5 Theme

Tags: ,

I_Code_HTML5_by_XchuzcoreX

Hi everybody!

First post on my brand new personal blog.

When I started thinking about this blog, I knew it will be designed in HTML5. So, with the help of my friend and excellent webmaster Ivan Zelenovsky, we started working on my blog’s theme, which you see now.

We wanted to create a clean, semantic, no-images and white-spaces theme, which will use  HTML5 new tags, as well as CSS3 features.

The result is in front of you and I’m very proud with what we achieved.

After developing this theme, I wanted to have a blank on for my future WordPress projects, so I cleaned it up and the result is “WebMason” – a blank HTML5 theme for WordPress.

Features:

1. We use only semantic tags for the structure of the site, take a look at the code for the article section:

<article>
	<header>
		<hgroup>
			<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
			<h2><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></h2>
			<h3> Posted in <?php the_category(', ');
				 if(has_tag()): 
				 echo ", tags: ";
				 the_tags( '', ', ', '.' ); 
				 endif; ?>
			</h3>
		</hgroup>
	</header>
	<section class="entry">
		<?php if (has_post_thumbnail()) {
				the_post_thumbnail(array(500,200), array('class' => "entry-pic"));
			}
		?>
		<?php the_content(); ?>
	</section>
	<a href="#wrapper" class="top-button">Back to top</a>
	<nav role="post-navigation">
		<div class="alignleft"><?php previous_post_link('<span>Previous</span>%link', '%title', false); ?></div>
		<div class="alignright"><?php next_post_link('<span>Next</span>%link', '%title', false); ?></div>
	</nav>
	<section role="comments-section">
		<?php comments_template(); ?>
	</section>
</article>

2. We tried to eliminate all “div”, “id” and “classes” and use semantic tags instead.

3.  The theme is image-less, so it loads up quickly.

4. For legacy browsers and IE support, we use 2 scripts:

  • Remy Sharp’s excellent html5shiv which creates HTML5 tags.
  • modernizer.js which adds fallback css classes for browsers  who don’t have full CSS3 support.

5. The theme was tested against:

  • Firefox 3.6
  • Chrome 8.0
  • IE 8
  • IE 7

Download it now give it a test drive and don’t forget to leave your feedback!

http://code.google.com/p/html5shiv/
Back to top