I often need an easy-to-implement page template as a base for new projects and many of the recently published HTML5 templates, boilerplates and CSS resets are a little bit too complicated for quick-and-random experiments or small-ish web projects.
Therefore I've been slowly creating my own HTML5 template that really only contains the bare minimum to create well-formed, good-looking and practical web pages that do work both in standard browsers as well as on mobile devices.
So here is a simple two-column HTML5 template with a CSS3 stylesheet that uses media queries to adjust the size and structure of the visible page to the available browser window size.
Features:
- Full HTML5/CSS3 compliant
- Three layout modes with media queries: standard browser, netbook/iPad, mobile phones
- Two columns for large screens with nav on the right, one column with nav on top for mobile
- Small screens get "Back to Top" links
- Simple, so it's easy to modify and use for your own projects - no kitchen sink included
- Industry-standard Lorem Ipsum preconfigured in every paragraph :-)
For further information on media queries, here is the W3C Candiate Recommendation for CSS3 Media Queries.
You may also be interested in some of my other articles around HTML5, CSS3 and JavaScript. Also, please feel free to leave a comment below.
The Template
Here are direct links to the files (open in new windows):
HTML5 Template: template.html
CSS3 Style Sheet: template.css
Check the comments in the style sheet to see how the media queries are structured.
You can experiment with the effects of the media queries by resizing the browser window (assuming you are not on a mobile device). You will notice that under 1000px width, the columns become flexible and shrink with the size of the window, and under 320px the main column becomes rigid with a width of 320px and the right sidebar navigation scoots to the top of the page.