Warp6 and HTML5 – Template and system markup is completely HTML5 based
Last week we highlighted the new Warp6 framework and the new styles feature. This week, let's start with something we are very proud of: Warp6 is fully packed and enriched with HTML5 and CSS3 goodness!
The template markup is now completely HTML5 based, and we updated the entire WordPress, Joomla 1.5 and 1.6 system markup which is now also rewritten in HTML5. We also use a lot of CSS3 and CSS 2.1 selectors which we couldn't use back in the days when we supported IE6. Now let's take a closer look at the details of the newly polished markup.
Template Layout
The first thing you will notice is the new, clean HTML5 Doctype and the changed header elements.
<!DOCTYPE HTML>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8" />
...
</head>
HTML5 introduces several new semantic HTML elements to represent logical sections of your content like article, aside, section, footer, nav, header, hgroup, nav and more. This new set of HTML elements makes it much easier to structure the template layouts, and it becomes a lot more semantic which is great for search engines! We make proper use of all these new HTML5 elements in our template and systems markup. If you want to learn more about HTML5 a good start is HTML5 Doctor or Dive Into HTML5.
Unfortunately all Internet Explorer versions older than IE9 don't support those new HTML5 elements. They don't print and render CSS on these new elements. We solved this by using the common solution html5shim. This JavaScript makes older Internet Explorers recognize and style the new HTML5 elements as well as make them printable.
System Markup
A great amount of time we spend on updating different system markups for WordPress, Joomla 1.5 and 1.6. As you already know from our Warp5.5 templates, the markup and CSS classes are the same for each system. This is awesome because it simplifies things and lets you develop cross-platform themes easily.
For example, we use article, header and footer elements in the blog view. One thing we want to mention is the new HTML5 time element which unambiguously encodes dates and times for machines but also still displays them in a human-readable way.
<time datetime="2011-02-11" pubdate>11 February 2011</time>
The pubdate attribute indicates that the time element is the date the article was published. This is also great when you think about search engines.
Not only the blog markup is build with HTML5 but also the complete system markup. This includes for example the WordPress comments and widgets as a well as all Joomla components and modules. We also make use of other HTML5 features like the placeholder attribute for the Ajax Search and Login forms. Of course, we added a JavaScript solution for all browsers who don't support the placeholder yet.
CSS3 and CSS 2.1 to the fullest
Warp6 is the first major framework release since we dropped support for IE6. So you can imagine how eagerly we waited to develop a new CSS foundation for our templates. Everything is rewritten from scratch, and we utilized the full power of CSS 2.1 selectors as well as all the shiny CSS3 stuff. Of course, we had progressive enhancement and graceful degradation in mind. The next blog post will take a closer look on our new powerful CSS framework.
CSS3 PIE
If you think of CSS3 you know that Internet Explorers 6-8 lack support for any of these new features. This is why we included the awesome CSS3 PIE into Warp6 by default. CSS3 PIE makes old Internet Explorers capable of rendering several of the most useful CSS3 decoration features like rounded corners, soft drop shadows, gradient fills and more.
Conclusion
Warp6 provides clean and lightweight HTML5 template and system markup which is styled by a brand new CSS framework. This allows you to create cutting-edge themes which can easily converted across different platforms like WordPress and Joomla. Next blog post will focus on the new CSS framework.
