Simply HTML5 and CSS3 – a free theme

27-12-2011 in topic : Development

As a new mom it is still quite difficult to get back to work due to time-limits . i thought of what to do to keep my skills up-to-date and to get my hands dirty with latest web standards, and i came up with experimenting HTML5 & CSS3 capabilities through making a free theme ,and since both HTML5 & CSS3 still have unfinished specifications i would get back to this theme more often to update the code with the latest specifications .

1-The Theme (simply HTML5 & css3)

this is a screenshot of the theme which is named (simply HTML5 & css3) , a very

basic theme with header , navigation menu , right side column and left content column , fluid content fixed width sidebar and a footer .

2-The markup

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simply HTML5 & CSS3</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie7-and-down.css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

<header id="header">
	<hgroup>
		<h1><a href="#">Simply HTML<span class="coloredNum">5</span> & CSS<span class="coloredNum">3</span></a></h1>
		<h3><a href="#">The future is for web standards</a></h3>
	</hgroup>
	<section id="headerbox">
		<form action="">
			<input type="search" placeholder="search..." />
		</form>
	</section>
</header>

<div id="maincontainer">
	<div id="wrapper">
		<nav>
			<ul id="mainnav">
			<li class="active"><a href="#">home</a></li>
			<li><a href="#">portfolio</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
			</ul>
		</nav>
		<div id="contentwrapper">
			<section id="contentcolumn">
				<article>
					<h2>First Article</h2>
					<figure><img src="http://localhost/html5/images/babyfeet.jpg"/></figure>
					<p><!--first article--></p>
				</article>
				<article>
					<h2>second Article</h2>
					<p><!--second article--></p>
				</article>

			</section>
		</div>

		<aside id="rightcolumn">
			<section class="asidecontent">
				<!--sidebar panel content-->
			</section>

			<section class="asidecontent">
				<!--sidebar panel content-->
			</section>
		</aside>
	</div>
	<footer id="footer">
	<section class="footercol">
		<h3>About The Author</h3>
		<article><p><!--Footer column--></p></article>
		</section>
		<section class="footercol">
			<h3>Contact Me</h3>
			<!--Footer column-->
		</section>
		<section class="footercol">
            <article>
			<h3>Sample Form</h3>
          <!--Footer column-->
            </article>
       </section>

		<p id="copyright"><!--copyright goes here--></p>
	</footer>
</div>
</body>
</html>

3-Steps I followed

you may ask yourself how to start to make a similar theme ?
these are the steps i followed to make the theme
  • plan a mockup of the theme using pencil and paper
  • write the markup in divs as i used to , then after making sure it works i turned them semantic wise to HTML5 elements like section,aside,footer, article,figure (you may disagree with me on this addtional unnecessary step , but i found that easier as i this was my first time to discover HTML5 new code)
  • for CSS3 i simply picked CSS3 effects i want to add to the theme (same way you add flavors to your cook) , so i picked box-shadow , rounded corners ,transform and transition for animation and added them to page elements .
  • added a form to experiment new HTML5 Form elements and enhancements (Opera currently is the best at supporting it as it is the only browser supporting datepicker and form auto validation) , and i gave a cry on seeing the datepicker and how simply it was rendered with a line of markup with no need for javascript
  • Finally i ran tests , it was tested on Firefox 3.6 , Chrome 7 , Opera 10.63 , IE 7 , IE 8 . I took a look at IE6 and the layout was working to my astonishment but there was a bug in the top navigation has nothing to do with HTML5 nor CSS3 but i didn’t bother fixing as i don’t want to support this legacy browser version .

4-Resources

Tutorials introducing you to HTML5 & CSS3 features

and although web tutorials are handy and easy to have , books remain a more in-depth source giving you references from A to Z check my earlier post about HTML5 & CSS3 new books

For Test :

html5test

For inspiration :

any suggestions or ideas about the markup are welcomed .

Comments (1)

Good blog! I really love how it is simple on my eyes and the data are well written. I’m wondering how I could be notified when a new post has been made. I have subscribed to your feed which must do the trick! Have a nice day!

Post a comment

*