While it is always worth having the knowledge of building a theme from the ground up (yes, it is worth trying this, it’s the best way of learning what each WordPress function/template tag does), it’s generally accepted that using a theme framework is the best way of starting your new WordPress project.

There are a wide variety of different frameworks out there – notable frameworks include the default WordPress theme TwentyTen, the awesome blank canvas from Elliot Jay Stocks known as Starkers, and the powerful Hybrid Core.

Some developers prefer to work with a blank framework (like Starkers), or use frameworks with built in “bespoke” functionality (like Hybrid) that may suit a particular project. For the majority of my websites, I’ll begin with a blank canvas framework, with my theme of choice being Starkers.

However, with the web now ready to accept HTML5 a whole lot more, I’ve recently been on the hunt for HTML5 frameworks. Here’s a round up of the best (in no particular order)…

1. Twenty Ten Five

Despite including a HTML5 doctype, Twenty Ten doesn’t offer much HTML5 markup. Richard Shephard has made the effort to change that. Check out Twenty Ten Five for a fully HTML5 developed version of the Twenty Ten theme we know and love.

2. HTML5 Reset (WordPress)

HTML5 Reset is a clever collection of files, perfect for starting new HTML5 projects. A WordPress theme/framework is also available. It makes of awesome HTML5 markup (as you’d expect), browser specific css (e.g. “.ie body”), and both Modernizr and Analytics are built in. Sound good?

3. Roots

The “Roots” theme offers some lovely clean HTML5 microformat markup, a Boilerprint base, and also some cool customisation with the 960 grid system.

4. Starkers (HTML5 Version)

Like Twenty Ten, Starkers includes a HTML5 doctype, but no real HTML5 markup. Nathan Staines has taken the best blank canvas around, and introduced plenty of HTML5 goodness.

5. Whiteboard

Probably my personal favourite at the moment… The Whiteboard framework’s biggest feature is it’s fully responsive layout (perfect for mobile and tablet viewing). However, it’s HTML5 markup isn’t the best, and you may find yourself redoing a fair bit of code. Your choice!

6. Bones

*Reader Recommendation

Recommended by JSEL in the comments below, this is a development theme that has somehow escaped me! Upon inspection, it looks pretty amazing. It’s been built with HTML5 boilerplate, has 960 grid compatibility, built in functions and post types have been included, and the HTML5 markup looks very tidy. I’ll be trying it out…

Conclusion

As you all know, I’m a big believer in HTML5, so in terms of WordPress development, these frameworks and themes are what I’m switching my attention to. If you haven’t had much experience with HTML5, I recommend you check out my previous HTML5 Template Building blog, before working with the markup in WordPress!

Following on from my previous blog on HTML5 and CSS3 template building, I’d thought I’d introduce this more in depth CSS3 technique… media queries.

Responsive web design refers to the idea that a web page can respond and adjust to match it’s environment, taking note of factors such as screen resolution, screen orientation, and device type. Using responsive techniques, it is now possible to make the same website display perfectly in a 1920×1080 widescreen monitor, and the original iPhone resolution of 320×480. Pretty awesome indeed.

So what are these “responsive techniques” I speak of. As already mentioned, CSS3 media queries is one. Fluid percentage based grids is another. And don’t forget fluid images. Mix these all together and you’ve got some groundbreaking code.

For this blog, I’ll be looking at the media query side of things. With the recent boom in interest with responsive web design, many assume that a responsive layout needs to be fluid. This is not true. Many of the limitations and problems with the old school fluid layouts from the 90′s still exist, so sometimes I feel using multiple fixed width layouts is the better option (which can be achieved using media queries only). Simon Collison has displayed this technique perfectly on his portfolio website. Resize the window and watch the magic happen.

In one of my previous blogs, I showed you how to construct a fully HTML5 web template. It’s time to make that template responsive…

Planning the Widths

If you’ve forgotten what the layout looked like, or haven’t read my previous HTML5 blog, click the thumbnail to the right to check it all out.

The first step is to decide what width’s we should be designing for (i.e. at what widths should the layout be changing). The current set width of the template is 960px (a very common website width these days, due to the popularity of the 960 Grid System). With that being the default width, our first rule will be for any monitor/device with a display of at least 960px wide to display the default layout.

The other widths I plan to design for are…

• 800px – used by various netbooks, smartphones such as the Nexus One, the Dell Streak tablet, etc.
• 600px – tablets such as the Samsung Galaxy and the Blackberry Playbook. While the iPhone 4 portrait width is only a little bigger at 640px.
• 480px – very common with smartphones… the old iPhone, Blackberry Torch, HTC G1 all have resolution widths of 480px.
• 320px – portrait width of the old iPhone.

My favourite website for browsing popular device resolutions, and also testing my media queries is ProtoFluid, check it out!

Media Query Code

So, with the resolutions finalised, it’s time to lay done the CSS code for each media query. Head to the bottom of the original stylesheet, and add in the following…

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {

}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {

}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {

}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {

}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {

}

A few things to note…

1. This CSS3 media query is essentially asking how wide the browser being used is, and then decides which CSS to display.
2. You may have noticed that my maximum and minimum width declarations are generally around 20px larger than the resolution width they’re meant to be supporting. This is because I’ve taken the vertical scrollbar into account. This is one small frustrating feature of media queries, as well explained by this article.

Right, so I’ll now briefly explain the concept of what I’m about to do. Our existing CSS will be used as our base. We can then use our new media queries to change particular elements when the display matches the declared widths. We’ll basically be adding (or overriding) new CSS on top of our base to be used when needed.

The method behind it isn’t difficult! After an hour or so of CSS coding, here’s my media queries in the CSS…

Media Query 1

@media only screen and (max-width: 980px) and (min-width: 821px) {
.bodywidth								{ width: 800px; }
#mainheader nav							{ font-size: 1.4em; }
#mainheader nav li						{ margin: 0 0 0 50px; }
#introleft								{ width: 470px; }
#introquote								{ width: 270px; }
#introduction h2						{ font-size: 2.85em; }
#aboutleft								{ width: 450px; }
#articlesright							{ width: 324px; }
#articlesright article					{ font-size: 0.95em; }
#mainfooter								{ font-size: 0.9em; }
#mainfooter li							{ margin: 0 25px 0 0; }
}

The first element I’ve corrected is the “bodywidth” class. As mentioned in my HTML5 Template Blog, I feel controlling your full width divs/elements with a separate class is the best method when using media queries. For each media query, I can simply set a new width to the class. I’ve also adjusted the widths of a few other elements (introduction block, main content area, etc). With a few subtle font size changes here and there, that’s the first media query complete.

Media Query 2

@media only screen and (max-width: 820px) and (min-width: 621px) {
.bodywidth								{ width: 600px; }
#mainheader								{ padding: 40px 0 0 0; }
#mainheader nav							{ font-size: 1.1em; margin: 12px 0 0 0; }
#mainheader nav li						{ margin: 0 0 0 25px; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 600px; }
#introquote								{ display: none; }
#aboutleft								{ width: 400px; }
#articlesright							{ width: 170px; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; }
#mainfooter li							{ margin: 0 15px 0 0; }
}

This one’s a little more interesting. With the width getting even lower, I decided to hide the “introduction quote” blockquote using “display: none”. With it visible, I felt the area looked to cramped, and in terms of content the quote is not a major requirement. This “display: none” trick is very useful with media queries, and can be used to hide anything if you feel there is simply no room left for the element. I also adjusted a few more widths, and made the logo/website title smaller.

Media Query 3

@media only screen and (max-width: 620px) and (min-width: 501px) {
.bodywidth								{ width: 480px; }
#mainheader								{ padding: 25px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 480px; }
#introduction h2						{ font-size: 2.7em; }
#introquote								{ display: none; }
#aboutleft								{ width: 310px; font-size: 0.9em; }
#articlesright							{ width: 150px; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 15px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

With this query, the biggest change is that the main navigation is now positioned to the left, underneath the website title, using “float: left” (and a few margin adjustments to tidy up).

Media Query 4

@media only screen and (max-width: 500px) and (min-width: 341px) {
.bodywidth								{ width: 320px; }
#mainheader								{ padding: 25px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 320px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 320px; font-size: 0.9em; }
#articlesright							{ width: 320px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

Things are getting pretty small now! With the width reduced further, I’ve floated the articles area to the left, so it’s now underneath the main content. The copyright paragraph in the footer has also been floated left.

Media Query 5

@media only screen and (max-width: 340px) and (min-width: 5px)  {
.bodywidth								{ width: 300px; }
#mainheader								{ padding: 27px 0 0 0; }
#mainheader nav							{ float: left; font-size: 0.9em; margin: 15px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 300px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 300px; font-size: 0.9em; }
#articlesright							{ width: 300px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.7em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

Not too much different from the previous query, with a few font-sizes and widths getting a little smaller. With our final query complete, that’s our responsive layout almost finished! For reference, here’s the full style sheet. If you want the HTML, again, check out my HTML5 Template Blog.

/* CSS Document */
/* Built by Jack at Tristar */

/* Reset */
*										{ margin: 0; padding:0; }
img, img a								{ outline: none; border: none; }
body									{ background-color: #fff; color: #575757; font: 81.3% "Georgia", times, serif; margin: 0; padding: 0; }
a,a:visited								{ outline: none; color: #4086c6; text-decoration: none; }
a:hover									{ text-decoration: underline; }

/* HTML5 Fix */
header, section, footer, aside, nav, article 	{ display: block }

/* Base Structure */
.bodywidth								{ width: 960px; margin: 0 auto; clear: both; }

/* General Type */
h1,h2,h3,h4,h5,h6						{ color: #2f2f2f; font-family: "Ubuntu", arial; }
.bold									{ font-weight: bold; }
.blue									{ color: #4086c6; }

/* Header */
#headerwrap								{ width: 100%; background: url('images/headerbg.jpg') repeat-x 0 0; height: 117px;  }
#mainheader								{ padding: 35px 0 0 0; color: #2f2f2f; text-shadow: 0px 0px 1px #fff; }
.logo									{ float: left; margin: 0 10px 0 0; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
.logo:hover								{ cursor: pointer; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
#websitetitle							{ float: left; margin: -8px 0 0 0; }
#websitetitle h1						{ font-size: 2.538em; font-weight: normal; }
#websitetitle h2						{ font: 1.462em "Georgia"; font-style: italic; font-weight: normal; margin: -3px 0 0 0; }
#mainheader nav							{ float: right; font: 1.615em "Ubuntu", arial,; margin: 8px 0 0 0; }
#mainheader nav li						{ list-style-type: none; display: inline; margin: 0 0 0 65px; }
#mainheader a,#mainheader:visited		{ color: #2f2f2f; }
#mainheader a:hover						{ text-decoration: none; color: #7e7e7e; }

/* Intro */
#introduction							{ margin-top: 25px; }
#introduction h2						{ font-size: 3.231em; font-weight: bold; margin: 0 0 5px 0; }
#introduction p							{ font-size: 1.154em; line-height: 140%; }
#introleft								{ float: left; width: 540px; margin: 0 0 25px 0; }
#introquote								{ float: right; font-style: italic; font-size: 1.15em; width: 335px; background: url('images/leftquotemark.png') no-repeat 0 0; padding: 28px 0 0 45px; margin: 20px 0 25px 0; }
#introduction .quotename				{ float: right; height: 27px; background: url('images/rightquotemark.png') no-repeat right top; margin: 10px 0 0 0; padding: 0 50px 0 0; font: 0.9em "Ubuntu"; color: #4086c6; }
a.findoutmore,a.findoutmore:visited		{ padding: 10px; font: 0.9em "Ubuntu", arial; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 13px 0 0 0; float: left; }
a.findoutmore:hover						{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Main Content */
#maincontent							{ border-top: 1px #dbdbdb solid; padding: 25px 0 0 0; overflow: hidden; }
#aboutleft								{ float: left; width: 540px; }
#aboutleft h3							{ font-size: 1.5em ; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft h4							{ font-size: 1.3em; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft p							{ line-height: 135%; margin: 0 0 15px 0; }
#articlesright							{ float: right; width: 380px; }
#articlesright article					{ clear: both; margin: 0 0 20px 0; overflow: hidden; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 119px; height: 119px; margin: 0 15px 0 0; }
#articlesright p						{ line-height: 135%; }
#articlesright h5						{ font-size: 1.3em; margin: 0 0 6px 0; color: #4086c6; }
#articlesright h5:hover					{ color: #2f2f2f; }
a.readmore,a.readmore:visited			{ padding: 4px; font: 0.9em "Ubuntu", arial; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 10px 0 0 0; float: left; }
a.readmore:hover						{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Footer */
#footerwrap								{ width: 100%; height: 78px; background: #2d2d2d url('images/footerbg.jpg') repeat-x 0 0; margin: 20px 0 0 0; }
#mainfooter								{ padding: 30px 0 0 0; text-shadow: 0px 0px 1px #000; }
#mainfooter nav							{ float: left; font-style: italic; font-size: 1.1em; width: 60%; }
#mainfooter li							{ list-style-type: none; float: left; margin: 0 35px 0 0; }
#mainfooter a,#mainfooter a:visited		{ color: #fff; }
.copyright								{ float: right; color: #b8b8b8; }

/* MEDIA QUERIES */

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {
.bodywidth								{ width: 800px; }
#mainheader nav							{ font-size: 1.4em; }
#mainheader nav li						{ margin: 0 0 0 50px; }
#introleft								{ width: 470px; }
#introquote								{ width: 270px; }
#introduction h2						{ font-size: 2.85em; }
#aboutleft								{ width: 450px; }
#articlesright							{ width: 324px; }
#articlesright article					{ font-size: 0.95em; }
#mainfooter								{ font-size: 0.9em; }
#mainfooter li							{ margin: 0 25px 0 0; }
}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {
.bodywidth								{ width: 600px; }
#mainheader								{ padding: 40px 0 0 0; }
#mainheader nav							{ font-size: 1.1em; margin: 12px 0 0 0; }
#mainheader nav li						{ margin: 0 0 0 25px; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 600px; }
#introquote								{ display: none; }
#aboutleft								{ width: 400px; }
#articlesright							{ width: 170px; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; }
#mainfooter li							{ margin: 0 15px 0 0; }
}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {
.bodywidth								{ width: 480px; }
#mainheader								{ padding: 25px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 480px; }
#introduction h2						{ font-size: 2.7em; }
#introquote								{ display: none; }
#aboutleft								{ width: 310px; font-size: 0.9em; }
#articlesright							{ width: 150px; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 15px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {
.bodywidth								{ width: 320px; }
#mainheader								{ padding: 25px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 320px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 320px; font-size: 0.9em; }
#articlesright							{ width: 320px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {
.bodywidth								{ width: 300px; }
#mainheader								{ padding: 27px 0 0 0; }
#mainheader nav							{ float: left; font-size: 0.9em; margin: 15px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 0; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 300px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 300px; font-size: 0.9em; }
#articlesright							{ width: 300px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ display: none; }
#mainfooter								{ font-size: 0.7em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

Tiding Up & Finishing Off

You probably already know that the iPhone generally zooms out when viewing a webpage to fit the whole site in the window. Even with our media queries declared, this still happens by default. With our mobile version of the site finished, there’s no real need for the iPhone to be displaying the original full width version. So, to stop this happening, add the following meta tag to your HTML (in the head)…

<meta name="viewport" content="width=device-width" />

At the moment, CSS3 media queries are only supported in more recent browsers (Firefox 3.5+, IE9+, Chrome 5+, Safari 4+, etc). For me, as the default width version will simply be loaded in older browsers, I’m not be bothered about adding in a support fix. However, if you do wish to add some support, check out the following Javascript Fix.

So, that concludes this week’s blog! Hopefully the concept of media queries hasn’t been too difficult to comprehend, but if you have any questions you wish to ask me, just leave a comment!

I’ve also re-uploaded the “HTML5Goodness” theme to the templates section with the new responsive CSS. All free to download!

The features and potential of HTML5 have been discussed many times online already, so what I’m hoping to do with this blog is explain how to begin developing with the markup right now. Why learn what it can do, without learning how to code and develop with it? So read on… I’ve even thrown a bit of CSS3 into the mix.

I’ll be explaining how to code up a fairly simple and generic web layout using HTML5, introducing you to many of the new structural elements along the way. I’ll also demonstrate how to make the template render correctly in older browsers that aren’t “supposed” to support HTML5. Even IE6 you say? Yes… even IE6.

Then finally, I’m hoping to produce a follow up blog on using this layout with CSS media queries. Or what many people know as responsive web design. Lets march onwards!

So, here’s a link (click the preview below) to the template that we’ll be making. You can even download it from our free templates section. Generous or what!

HTML

The Head

To begin, as always, create a new HTML file in the web editor of your choice. The first thing we need to do is declare the doctype…

<!DOCTYPE html>

Small, neat, and easy to remember. Who can argue with that!

The rest of the head is nothing revolutionary. We’ll be using an easy unicode charset, and a normal meta tag layout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tristar HTML 5 Template</title>
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Jack, Tristar" />
<meta name="copyright" content="Tristar Web Design" />
<meta name="description" content="An awesome example of HTML5 template design, by Tristar." />
<meta name="keywords" content="html5,css3,this,is,just,an,example,really" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
</head>

That is a functional HTML5 head layout. But it needs more if we’re going to stop it breaking in older browsers. Let me introduce you to some hacks fixes.

First we’ll include the big one. Remy Sharp has produced a Javascript fix that tells IE how to display this mysterious new markup that Microsoft didn’t pay much attention to. We’ll wrap it in a conditional comment so all non IE browsers ignore it. Many problems solved.

Then to follow on, we’ll include a second Javascript file that brings IE6, IE7, and IE8 to a much more modern standard. Both of these fixes are hosted on Google Code servers, so there’s no need to download any files!

And although it’s not a fix, I’ll also include some JS files taken from the Google Font Directory. This is my favourite CSS font loading method at the moment. The fonts will be referenced in the CSS markup.

So the final head looks like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tristar HTML 5 Template</title>
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Jack, Tristar" />
<meta name="copyright" content="Tristar Web Design" />
<meta name="description" content="An awesome example of HTML5 template design, by Tristar." />
<meta name="keywords" content="html5,css3,this,is,just,an,example,really" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold' rel='stylesheet' type='text/css'>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>

A final note, to make your HTML5 validate you don’t actually need to follow the traditional XHTML syntax of self closing tags, lower case code, etc. I just continue to do so, as it ‘s cleaner code, and the forgiving nature of HTML shouldn’t make you lazy with your markup.

Lets Rock the Body

Header and Navigation

No longer is there any need for <div id=”header”></div> , instead we can use the new header tag, <header>. The incredibly useful resource that is W3Schools gives the following description for this tag – “The <header> tag specifies an introduction, or a group of navigation elements for the document.”

We can also add the navigation area using a <nav>. Remember, these two new tags don’t only have to be used for the main header/navigation at the top of the website. The header can be used multiple times, maybe to define the header of an article post, while the nav tag could also be used in navigation you have in the footer. If it fits the description, use it!

Last but not least, I’ve also used the new <hgroup> tag for the text title. This has an incredibly simple definition of…

“The hgroup element is used to group headers, <h1> to <h6> , where the largest is the main heading of the section, and the others are sub-headings.”

Perfect for a website title and slogan…

A main header wrap is required, as our background image needs to stretch to fit this window. Couple this with the usual way of building a listed navigation and an image link to our logo, and our header is laid out like this:

<div id="headerwrap">
  <header id="mainheader" class="bodywidth"> <img src="images/logo.png" alt="Logo" class="logo" />
    <hgroup id="websitetitle">
      <h1><span class="bold">HTML5</span>Goodness</h1>
      <h2>about as modern as it gets...</h2>
    </hgroup>
    <nav>
      <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="News">News</a></li>
        <li><a href="#" title="Contact Us">Contact Us</a></li>
      </ul>
    </nav>
  </header>
</div>

P.S. You may have spotted my header has a mysterious class called “bodywidth”. I’ll be using this on all main alignment divs to set a width and an auto margin, thus centering it in the page. I’m favouring this method as it works better with CSS media queries which we’ll be moving on to next week. By all means, use the “standard” div wrapping method if you prefer to. Both work well… honest.

The Introduction

If you studied the template we’re creating by visiting the link I added near the top, you’ll notice our main content is split into 4 grid-like squares. At the top left we have the website introduction. A quote/testimonial is sitting loud and proud at the top right. The bottom left area is the main body text (i.e. description of the company), while the bottom right has a column of news articles.

I began the introduction area by inserting an aside tag. This new arrival to HTML has gained a reputation for often being overused by developers, who aren’t quite sure of when and how to use it. Again, if we take a peek at W3Schools, they tell us that…

“The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.”

Our introduction is certainly aside from the content below, and as it is basically introducing the main body text, it’s definitely related! So after inserting the aside, a div is required to align the main introduction to the left, while I’ll use a classic HTML element for the testimonial area – <blockquote> . And yes, you can give a blockquote an ID.

<aside id="introduction" class="bodywidth">
  <div id="introleft">
    <h2>Welcome to <span class="blue">our website</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique.</p>
    <p><a href="#" title="Find Out More" class="findoutmore">Find out more?</a></p>
  </div>
  <blockquote id="introquote">
    <p>This company is amazing. I can't come up with enough good things to say. Literally. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna tortor.</p>
    <p class="quotename">John Smith, <span class="bold">Another Company</span></p>
  </blockquote>
</aside>

Main Content Area

Not gonna lie, the layout for the main body text is pretty dull. I can’t even bring you one bit of HTML5 revolution. Bad times! Still, if divs are the ideal structural element, make sure you use ‘em. I’ve seen some pretty filthy HTML5 templates lately that are packed full with sections and asides which is abusing the markup badly!

So, here’s the content markup. Excuse the “maincontent” div that’s still open, the news area is waiting to creep inside.

<div id="maincontent" class="bodywidth">
  <div id="aboutleft">
    <h3>Awesome Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique justo ligula sit amet metus.</p>
    <p>Etiam a magna vitae diam elementum dignissim. Donec eget justo ut eros fermentum sodales. Donec eleifend sodales gravida. Nulla nulla metus, laoreet at consectetur sed, dapibus vitae felis. Donec venenatis laoreet purus vel hendrerit. Donec sit amet sem a metus bibendum gravida sit amet at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <h4>Another Awesome Title</h4>
    <p>Maecenas eu purus ipsum, non accumsan metus. Mauris augue dui, condimentum quis aliquam non, tincidunt id tortor. Donec dignissim sem sed nisl luctus scelerisque. Cras lacinia aliquam orci ac ultricies. Vestibulum ac lacus eu nisi commodo sollicitudin. Curabitur at consectetur leo. Donec augue velit, ornare in fermentum quis, tristique id augue.</p>
    <p>Cras sem est, luctus ac pharetra id, feugiat id enim. Nullam at massa felis, vitae hendrerit tellus. Sed placerat arcu sed risus commodo iaculis. Aenean at felis enim. Mauris eget est in diam sagittis ultrices sit amet eu mi. Sed ultrices, orci et tincidunt fringilla, diam diam consequat elit, vel tempus mauris mi vitae sem. Ut lectus est, commodo a pulvinar at, faucibus et ligula.</p>
  </div>

News Articles Area

A certain HTML5 tag named <article> has arrived into the markup with a round of applause. One of the major online growths has been the (fairly) recent influx of blogs and news portals, and HTML5 seems to have appreciated that, as we can now create a perfect looking markup for a news page or blog post.

For my template, I’ve aligned the news area to the right using a <section> tag. Probably offering one of the most broad definitions in the HTML5 tag library, it’s ultimately become the most abused. W3Schools tells us that…

“The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.”

Since each news post is a different section, <section> is perfect in this case to define them as a group.

As explained previously, I’ve then wrapped each news post in <article> tags. I’m not even going to bother bringing you a description for that one! Another fresh tag has also arrived – <figure> . The figure element “should be relevant to the main content, but if removed it should not affect the flow of the document”. So, I’ve used “figure” to define, position, and style the occupying image that each news article has. The images are relevant (well, maybe not on our template example…) to each article, but if deleted the articles would still be perfectly understandable.

The final touch for this area was to wrap each article title in header tags. Perfect…

<section id="articlesright">
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
  </section>
</div>

The Footer

So, the HTML is almost there guys, but we can’t forgot a certain area at the bottom of the template. You’ve probably second guessed that there’s a tag ready and waiting for the footer. Yes, time to insert a <footer> .

I’ve placed the footer inside a footer wrap div (not unlike the header), to get that stretched out background once again. A <nav> block has also been thrown into the template for a second time (footer navigation is always useful). As mentioned previously, don’t forget that a footer doesn’t need to refer to the far bottom of your web page – sidebars can have footers, articles can have footers, and so can many other things.

Well, that completes the HTML. Here’s the full markup:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tristar HTML 5 Template</title>
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Jack, Tristar" />
<meta name="copyright" content="Tristar Web Design" />
<meta name="description" content="An awesome example of HTML5 template design, by Tristar." />
<meta name="keywords" content="html5,css3,this,is,just,an,example,really" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold' rel='stylesheet' type='text/css'>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>
<body>
<div id="headerwrap">
  <header id="mainheader" class="bodywidth"> <img src="images/logo.png" alt="Logo" class="logo" />
    <hgroup id="websitetitle">
      <h1><span class="bold">HTML5</span>Goodness</h1>
      <h2>about as modern as it gets...</h2>
    </hgroup>
    <nav>
      <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="News">News</a></li>
        <li><a href="#" title="Contact Us">Contact Us</a></li>
      </ul>
    </nav>
  </header>
</div>
<aside id="introduction" class="bodywidth">
  <div id="introleft">
    <h2>Welcome to <span class="blue">our website</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique.</p>
    <p><a href="#" title="Find Out More" class="findoutmore">Find out more?</a></p>
  </div>
  <blockquote id="introquote">
    <p>This company is amazing. I can't come up with enough good things to say. Literally. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna tortor.</p>
    <p class="quotename">John Smith, <span class="bold">Another Company</span></p>
  </blockquote>
</aside>
<div id="maincontent" class="bodywidth">
  <div id="aboutleft">
    <h3>Awesome Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique justo ligula sit amet metus.</p>
    <p>Etiam a magna vitae diam elementum dignissim. Donec eget justo ut eros fermentum sodales. Donec eleifend sodales gravida. Nulla nulla metus, laoreet at consectetur sed, dapibus vitae felis. Donec venenatis laoreet purus vel hendrerit. Donec sit amet sem a metus bibendum gravida sit amet at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <h4>Another Awesome Title</h4>
    <p>Maecenas eu purus ipsum, non accumsan metus. Mauris augue dui, condimentum quis aliquam non, tincidunt id tortor. Donec dignissim sem sed nisl luctus scelerisque. Cras lacinia aliquam orci ac ultricies. Vestibulum ac lacus eu nisi commodo sollicitudin. Curabitur at consectetur leo. Donec augue velit, ornare in fermentum quis, tristique id augue.</p>
    <p>Cras sem est, luctus ac pharetra id, feugiat id enim. Nullam at massa felis, vitae hendrerit tellus. Sed placerat arcu sed risus commodo iaculis. Aenean at felis enim. Mauris eget est in diam sagittis ultrices sit amet eu mi. Sed ultrices, orci et tincidunt fringilla, diam diam consequat elit, vel tempus mauris mi vitae sem. Ut lectus est, commodo a pulvinar at, faucibus et ligula.</p>
  </div>
  <section id="articlesright">
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
    <article>
      <figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
      <header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
      <a href="#" title="Read More" class="readmore">Read more</a> </article>
  </section>
</div>
<div id="footerwrap">
  <footer id="mainfooter" class="bodywidth">
    <nav>
      <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="News">News</a></li>
        <li><a href="#" title="Resources">Resources</a></li>
        <li><a href="#" title="Sitemap">Sitemap</a></li>
        <li><a href="#" title="Contact Us">Contact Us</a></li>
      </ul>
    </nav>
    <p class="copyright">Copyright &copy; 2011 <a href="http://www.tristarwebdesign.co.uk/" title="Web Design">Tristar</a>. Valid <a href="http://validator.w3.org/check?uri=referer" title="HTML5">HTML5</a>.</p>
  </footer>
</div>
</body>
</html>

Time now to tip toe in some CSS3. HTML5 can’t be pretty on it’s own.

CSS

Many of you will have likely dabbled in some CSS3, or even developed with large quantaties of it. It’s learning curve certainly isn’t the steepest, so many web designers are happy to dive right into everything it offers. However, CSS3 does offer a lot more than many people realise. Features like “column-count” and “nth-child” can get a fair bit more technical than the more casual additions to CSS like rounded borders and gradients! Media queries is arguebly the most interesting development in my opinion, and I will be guiding you through it in next weeks follow up blog.

Meanwhile, I’ll give you a tour of the CSS for this template layout. Here’s the code (probably worth hovering over the area below and clicking the view source button that appears – the squashed effect doesn’t do my code layout justice…)

/* CSS Document */
/* Built by Jack at Tristar */

/* Reset */
*									{ margin: 0; padding:0; }
img, img a								{ outline: none; border: none; }
body									{ background-color: #fff; color: #575757; font: 81.3% "Georgia", times, serif; margin: 0; padding: 0; }
a,a:visited								{ outline: none; color: #4086c6; text-decoration: none; }
a:hover								{ text-decoration: underline; }

/* HTML5 Fix */
header, section, footer, aside, nav, article 		{ display: block }

/* Base Structure */
.bodywidth								{ width: 960px; margin: 0 auto; clear: both; }

/* General Type */
h1,h2,h3,h4,h5,h6						{ color: #2f2f2f; font-family: "Ubuntu"; }
.bold									{ font-weight: bold; }
.blue									{ color: #4086c6; }

/* Header */
#headerwrap							{ width: 100%; background: url('images/headerbg.jpg') repeat-x 0 0; height: 117px;  }
#mainheader							{ padding: 35px 0 0 0; color: #2f2f2f; text-shadow: 0px 0px 1px #fff; }
.logo									{ float: left; margin: 0 10px 0 0; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
.logo:hover								{ cursor: pointer; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
#websitetitle							{ float: left; margin: -8px 0 0 0; }
#websitetitle h1							{ font-size: 2.538em; font-weight: normal; }
#websitetitle h2							{ font: 1.462em "Georgia"; font-style: italic; font-weight: normal; margin: -3px 0 0 0; }
#mainheader nav							{ float: right; font: 1.615em "Ubuntu"; margin: 8px 0 0 0; }
#mainheader nav li						{ list-style-type: none; display: inline; margin: 0 0 0 65px; }
#mainheader a,#mainheader:visited				{ color: #2f2f2f; }
#mainheader a:hover						{ text-decoration: none; color: #7e7e7e; }

/* Intro */
#introduction							{ margin-top: 25px; }
#introduction h2							{ font-size: 3.231em; font-weight: bold; margin: 0 0 5px 0; }
#introduction p							{ font-size: 1.154em; line-height: 140%; }
#introleft								{ float: left; width: 540px; margin: 0 0 25px 0; }
#introquote								{ float: right; font-style: italic; font-size: 1.15em; width: 335px; background: url('images/leftquotemark.png') no-repeat 0 0; padding: 28px 0 0 45px; margin: 20px 0 25px 0; }
#introduction .quotename					{ float: right; height: 27px; background: url('images/rightquotemark.png') no-repeat right top; margin: 10px 0 0 0; padding: 0 50px 0 0; font: 0.9em "Ubuntu"; color: #4086c6; }
a.findoutmore,a.findoutmore:visited				{ padding: 10px; font: 0.9em "Ubuntu"; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 13px 0 0 0; float: left; }
a.findoutmore:hover						{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Main Content */
#maincontent							{ border-top: 1px #dbdbdb solid; padding: 25px 0 0 0; overflow: hidden; }
#aboutleft								{ float: left; width: 540px; }
#aboutleft h3							{ font-size: 1.5em ; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft h4							{ font-size: 1.3em; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft p							{ line-height: 135%; margin: 0 0 15px 0; }
#articlesright							{ float: right; width: 380px; }
#articlesright article						{ clear: both; margin: 0 0 20px 0; overflow: hidden; }
#articlesright figure						{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 119px; height: 119px; margin: 0 15px 0 0; }
#articlesright p							{ line-height: 135%; }
#articlesright h5							{ font-size: 1.3em; margin: 0 0 6px 0; color: #4086c6; }
#articlesright h5:hover						{ color: #2f2f2f; }
a.readmore,a.readmore:visited				{ padding: 4px; font: 0.9em "Ubuntu"; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 10px 0 0 0; float: left; }
a.readmore:hover							{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Footer */
#footerwrap							{ width: 100%; height: 78px; background: #2d2d2d url('images/footerbg.jpg') repeat-x 0 0; margin: 20px 0 0 0; }
#mainfooter							{ padding: 30px 0 0 0; text-shadow: 0px 0px 1px #000; }
#mainfooter nav							{ float: left; font-style: italic; font-size: 1.1em; width: 60%; }
#mainfooter li							{ list-style-type: none; float: left; margin: 0 35px 0 0; }
#mainfooter a,#mainfooter a:visited			{ color: #fff; }
.copyright								{ float: right; color: #b8b8b8; }

First thing to note, the “HTML5 Fix” styling is another fix to help out older browsers display the HTML5 structure. Make sure to include it!

90% of the CSS, as you’ll notice, is code that you’ve probably seen plenty of times before. Our new HTML5 tags are styled the same way as any old HTML markup, referencing the tag type, or a set ID.

So, as this blog is directed towards those who have past experience with CSS, I’ll only highlight the code that is something new and a little bit different.

The first use of CSS3 is included on the logo rollover. Gimmicky and ultimately useless, but I struggled to resist. By including the transform/rotate code, we can tell the logo to rotate a full 360 degrees on the hover state. I’ve also included some easing so the rotate doesn’t happen instantly (which, being a 360 degree rotate, would look like the logo hasn’t moved). I’ve included the webkit and moz alternative codes (as with all the other CSS3) so the effect works on every browser that can handle it.

I’ll move on to explain how I styled up the “find out more” and “read more” links scattered around the template. These are pure CSS3 buttons, with no images referenced, or png fixes. Using border-radius, buttons can be given smooth rounded corners. I highly recommend the Border Radius Generator to help you get the perfect code for whatever look you want.

The gradient background effect is created using the new gradient capability of CSS3. Angles, colour values, fades, etc can all be set. Once again, to help you out I recommend the following generator – CSS3 Gradients.

And finally, I regularly included some text-shadow on the font styling. Text shadow was part of CSS2 when it first arrived, but was eventually removed. CSS3 has brought it back and I love it! Many effects can be creating using text-shadow, including outer glows, and letterpress text.

That’s that! The finished product can be viewed again over here.

To sum it up, we’ve created a full HTML5 and CSS3 layout, that also proves HTML5 layouts can work in all browsers. Whether you decided to support all browsers is your decision!

Next week I’ll be demonstrating how to use media queries with this template. See you then!