Bones: an HTML framework

Probably one of the most useful things I’ve come across in a long time is Bones, by Chris Scharf. If you haven’t already followed the link, it’s a framework for building HTML mockups using ERB.

I’ve always been one to design something out for real, rather than make an image in Photoshop. Two major annoyances with creating real mockups: 1) keeping it DRY and 2) making use of it after it gets “approved” or whatever.

Annoyance #1

Chris built this framework with layouts, views, partials, and helpers baked right in (hence the “framework” part), without the need for controllers. Those of you who are familiar with Rails will really appreciate that. Now code can be reused instead of duplicated. Annoyance #1 solved.

Annoyance #2

Once the design is done, going through all of the files and chopping up the HTML to fit within the application templates is annoying. I dread it for some reason. If you’re developing in Rails (like I do), then the files (layouts, views, partials) you build out for the mockup can be dropped directly into a Rails app. The framework supports file names of the format “index.html.erb”, just like Rails. You can port any Bones helpers directly into Rails, too. Annoyance #2 solved.

Uploading to the server

There’s a caching mechanism (now a rake task) that will parse all of your files and generate a “public” directory of static .html files. Now they can be put up anywhere and easily distributed as needed. Perfect.

Conclusion

Bones is one of those things that make me wonder why I’ve never pursued this before. It’s so obvious once it’s there. I doubt that my version would have been put together as well as Chris’ version, but still. If you design mockups, Bones is now a must.

$> mkdir <your_mockup>
$> cd <your_mockup>
$> git clone git://github.com/scharfie/bones.git
$> rake server

It’s that simple.