Stuff & Nonsense product and website design

Blog and all that malarkey

Rock Hammer, a curated, responsive project library

If you listen to Unfinished Business, you’ll know that I’m a big, big fan of Hammer For Mac, the app its developers say lets you create HTML builds & templates quicker, more efficiently & more conveniently. Hammer works for us because these days we mostly deliver static HTML and CSS templates, instead of static visuals, and we rarely develop complete sites.

I’ve used Hammer since its beta and it’s become an indispensable tool. Back when I reviewed it in November 2012, I noted that Hammer can create a standard project with a default set of files. I want to start my projects with my own set of files so in January I started to design a new project library that I can use with Hammer. I called it Rock Hammer and I’ve made it available on GitHub today.

With the current version of Hammer For Mac, the only way to install Rock Hammer is to open the app’s package contents and copy the files into Contents > Resources > SampleApp. This will no doubt be easier in future versions.

What’s Rock Hammer?

It’s my curated project library of HTML, CSS and Javascript files, the ones I use to begin any new design project. It includes baseline typography styles, styling for common HTML elements including images, forms and tables, as well as navigation, responsive modules and widgets, some derived from Bootstrap, others from Responsive Patterns.

Rock Hammer’s also a design delivery tool as it includes a HTML patterns page (primer/guide) that’s easy to style. We now use Rock Hammer’s patterns page as a working tool when we discuss design ‘atmosphere’ (colour, typography and texture) with our clients.

Rock Hammer uses Hammer For Mac’s Clever Paths and HTML Includes and includes HTML partials to make putting together a set of templates ridiculously quick and easy. Hammer compiles Sass, so Rock Hammer’s CSS has been written using Sass and includes a set of Sass partials.

Who’s Rock Hammer for?

Me first, Stuff and Nonsense second, then you.

One of the things I’ve learned working with designers who don’t code HTML and CSS is that they need access to simple tools that can help them move away from spending hours of wasted effort in Photoshop making pictures of websites, towards designing websites themselves. Nothing shows off web type better than type in a browser, nothing demonstrates a button or navigation better than the real thing in action. I know that learning HTML and CSS can be daunting, I see that every day in our studio, so we structured Rock Hammer so it’s really easy for designers who don’t code to use.

Using Rock Hammer starts with editing three main files:

  • An HTML _variables partial that contains site name, license etc.
  • rock-hammer.scss to set which Sass/CSS partials to include based on the HTML content of your project
  • The main _config.scss that we’ve structured and commented and we hope makes sense to non-coders and experienced developers alike

If you’re already competent with HTML and CSS, you can use Rock Hammer to start a project just as you would Bootstrap, HTML5 Boilerplate or ‘320 and Up.’

Some quick questions about Rock Hammer answered

Q: Does Rock Hammer replace ‘320 and Up’?

Yes. For us it has. Like most libraries today, Rock Hammer’s media queries are ordered small screen first. In fact, there’s more and better responsive design tools in Rock Hammer than there ever were in ‘320 and Up.’ Also, we won’t be developing ‘320 and Up’ anymore, Rock Hammer is the future.

Q: Do I have to use Hammer For Mac to use Rock Hammer?

No. Although Rock Hammer was built for use with Hammer For Mac, you can still use it without. If you don’t use Hammer (yet) or you develop on Windows, just grab the compiled index.html from Rock Hammer’s Build folder. Likewise, you can use Rock Hammer’s Sass and compile it to CSS anyway you like.

Q: Do I have to use Sass too?

Again, no. You can take what you need from Rock Hammer’s Build folder including all the typography, forms, tables, navigation, responsive modules and widgets’ styling from the compiled CSS. Of course the experience won’t be as good as using Hammer For Mac, but you’ll get there in the end.

Rock Hammer’s now available on GitHub where I hope you’ll download, use, contribute and improve it.


Written by Andy Clarke who tagged this with responsive, tools


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


Hire me. I’m available now to work on product and website design projects.