The new Handcraft is here!

Create a prototype with the HTML5 boilerplate

HTML5 Boilerplate

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

Here’s what we did: we took the HTML, CSS and Javascript files included in the HTML5 boilerplate download and created new sheets in a quplo prototype based on them. This was a bit of a hassle for the minified, massive 80kb javascript libraries, but surprisingly, our editor seems to survive that much syntax highlighting (thanks again to Marijn Haverbeke’s amazing javascript abilities). We also had to tweak one or two things to get quplo to understand what was going on, since quplo requires well-formed XML and some of the conditional comment hacks for IE were causing some parsing issues.

Specifically, here’s exactly what we changed:

  • Added a comment to the top of index.html to refer to
  • 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

Want to try it out? Here’s what you do:Screenshot of quplo's create prototype screen

  1. First, create a quplo account (or sign in to your existing one)
  2. Click on Prototypes at the top
  3. Click on “Create a new prototype” on the right
  4. Type a name and pick a URL
  5. In the list of templates below, pick “HTML5 boilerplate”
  6. Hit “Create it!”
  7. 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.

No Comments

Ping RSS

Be the first to respond!

Leave a reply

You must be logged in to post a comment.