Responsive Web Design Template Builder BETA

The following tool is designed to allow you to quickly set-up the required code for your page layout using Dave Gamache's excellent Skeleton Grid System, which has been designed to help you present your content on multiple devices.

You can add as many sections and cells as are required for your layout, and adjust the size of your grid cells by dragging the bottom-right corner (highlighted in red) in either horizontal direction. You can also adjust the order of your cells, even across sections, by doing a drag and drop when you see the move cursor.

If you want to remove a grid cell, simply double-click on it.

26/07/2012 - Now if you enter 'header', 'nav' or 'footer' as your section id, it swaps it out for these new HTML5 open/close tags.

  • 160px (grid_3)
  • 760px (grid_13)

Grab the code!

Watch the video

We've made a quick video that shows you how to use this tool:

Utility Wish-list

We think we've already identified some obvious areas for improvement:

  • Add feature to drag grid cells from one section to another? - not sure this is possible with current live DOM reload
  • Add option to add mixed 12 column or 16 column sections?
  • Add option to re-order sections?

Have you got any ideas on how this utility could be improved? Let us know through the comments on our related blog post.