Designer Andy Clarke has announced a replacement for his well-known boilerplate 320 and Up.
The new project is Rock Hammer, a “curated project library for Hammer for Mac”, but that’s also usable by anyone lacking access to the OS X app.
.net spoke to Clarke about his reasoning behind replacing 320 and Up, and how the need for new design workflows influenced his latest creation.
.net: Why did you decide to stop working on 320 and Up?
AC: I’d been wondering for a while whether it had a place any more. When I originally wrote 320 and Up, the major frameworks were structuring style sheets desktop-down. I put 320 and Up out there as the first that turned everything on its head and went mobile-first/content-first, which is now the standard.
In the second iteration, 320 and Up really became more about being my typographic and HTML element styling defaults — the stuff I put into every project. But it was running out of energy, and I’ve not updated it for a while.
.net: What was the impetus behind Rock Hammer?
AC: I’d been working for a few months with the fantastic Hammer for Mac, which processes all kinds of HTML, CSS and JavaScript. Because I predominantly work with static files, I rarely have to build sites any more. Most of my design deliverable is HTML, CSS and a bit of JavaScript.
Hammer does really nice things that speed up workflow when writing static HTML and CSS. It has variables and clever paths in it, so you don’t have to specify the full path to assets and can easily move things around. I thought to myself that, since I was using the app all the time, I should make a toolkit that works well with it. What I created can stand alone, but my main aim was to take those 320 and Up principles and build them into a really nice toolkit for Hammer. And that’s what Rock Hammer is.
.net: What is it about Hammer and Rock Hammer that appeals to you from a workflow standpoint?
AC: I’ve got really keen on developing sites without thinking about layout, pushing this idea of designing that I call ‘atmosphere’, [which is made up of] all the elements of a site out of the context of layout. You design those things first, thinking about typography, colour themes for mood and interaction, textural stuff like boxes with rounded corners or square edges. What you don’t do is create a canvas — a Photoshop comp.
What Rock Hammer does is make it really quick to style all of those elements. You literally only have to fill in a dozen variables and you’ll get a really quick ‘theme’.
.net: Do you think this is something that will be useful for more traditional designers now working on the web?
AC: Definitely. We’ve taken on a new designer and she’s really, really great but doesn’t know code. Instead of spending time in Photoshop designing buttons and type, I want her to be working in the stuff web pages are made of. So what we did was configure the Rock Hammer files so one file controls virtually everything. It’s really well commented and written like a story: you do this first, and then you do the next thing.
Note, that this isn’t about [abandoning] Photoshop, but rather about [preventing the need to] create endless comps. A designer shouldn’t necessarily know how to do a complete page layout in CSS or style a list into tabs so it’s cross-browser. But what they should be able to do is move beyond this PSD phase and deliver something that’s of the web. Hopefully, Rock Hammer makes that easy.
