Heard of the HTML5 boilerplate? It’s a recent great idea by Paul Irish and Divya Manian. The basic concept is that it gives you a great head start to creating a new HTML5 website by offering a pre-filled HTML file, the right CSS setup (including taking handheld styles into account), and automatic compatibility with older browsers. That’s great for people learning HTML5, but also for more experienced people who don’t want to keep typing out the same old boilerplate code (hence the name).
When we saw this, we immediately knew it would be great for quplo, since quplo is also all about getting somewhere faster and DRY. In our case, it’s about building prototypes superfast so you can communicate about them more easily and reach the end goal – whatever that may be – faster.
So we downloaded the HTML5 boilerplate and created a prototype template with it.
The HTML5 boilerplate prototype template
Within quplo we offer several ways to get started with a new prototype: you can start from scratch, create a new prototype based on a website, or create a CSS Zen Garden prototype. But there’s nothing that really helps you start a new website in HTML5 quickly.
Thankfully, the HTML5 boilerplate comes with all the important stuff for quickly creating a prototype:
- a HTML5 file that has the basic structure and head information filled out
- script references in the right places to avoid all kinds of weird cross-browser quirks
- conditional comments to handle various versions of Internet Explorer
- Modernizr, jQuery, Yahoo! Profiler and the right architecture to extend and implement them
How it works
Specifically, here’s exactly what we changed:
- Added a comment to the top of index.html to refer to html5boilerplate.com
- Commented out the last conditional comment that places a body tag if the browser doesn’t identify as IE or as greater than IE9. We placed a real body tag directly after this comment and needed to do this or quplo wouldn’t swallow it. Thankfully you can just uncomment the relevant parts when you go into production.
- Moved the Yahoo! profiler’s charts.swf file to a different location in accordance with how quplo’s file structure works. It now lives at /media/charts.swf instead of /js/profiling/charts.swf.
- Ignored the following files: .gitignore, .htaccess, 404.html, crossdomain.xml, nginx.conf and robots.txt, since none of those apply given that quplo isn’t a web server.
- Corrected self-closing tags like link, hr and br to be XML well-formed (meaning we added a / to the end of each tag. No big deal!)
- Actually fixed a broken closing tag in the demo file
Overall, however, the boilerplate remains fundamentally unchanged and you should be able to use it as you would if it weren’t hosted by quplo.
Try it for yourself
- First, create a quplo account (or sign in to your existing one)
- Click on Prototypes at the top
- Click on “Create a new prototype” on the right
- Type a name and pick a URL
- In the list of templates below, pick “HTML5 boilerplate”
- Hit “Create it!”
- There you go! You can now create a HTML prototype using the HTML5 boilerplate.
If you have any questions about quplo, prototype templates, the way we implemented the boilerplate, or you find any bugs, let us know via the various contact options at our support site, or drop us a note here in the comments.
Leave a reply