Anvil icon


A front-end template for
Hammer Hammer logo and Codekit. Codekit logo

Hammer smiths!


Codekit cats!


Hammer/kit, HTML5 Boilerplate, and SASS have been smushed together. (and a hunk of Twitter Bootstrap)

Anvil is designed to make my life easier and faster. I am fond of HTML5 Boilerplate and SASS in particular (and now Hammer/kit). The only logical solution was to go for an ultimate max-niche combo and smash the tools together. If you are still reading this and have no idea what any of those things are, know that Anvil just might be the tangy blend of front-end files you've been waiting for.

tl;dr Anvil is a collection of files designed to simplify and expedite building kick-ass websites.

The Hammer bits

HTML includes
<!-- @include _head -->

Create reusable chunks of HTML. I tend to use _head, _footer, and _nav for most pages and add other includes situationally.


Variables make it easy to have a consistent header and change out the title or add classes to the body. Because both of those things are awesome, they are in Anvil.

<!-- $title Yup! -->

<!-- $body-class home -->

Did I mention those both have fallbacks? $title falls back to Anvil and $body-class falls back to default. Naturally, you may want to change these and can find them in _head.html

Clever paths
<-- @path lazy.html -->

If you're too lazy to remember your paths, you'll find clever paths a lifesaver. Basically, Hammer finds the file you want and does the rest for you.

Live reload
<!-- @reload -->

Changes are detected and your pages are refreshed. Happy?

Read the Hammer documentation to better understand the use cases.

HTML5 Boilerplate


Write less, do more, blah blah javascript blah. It's awesome and you probably want it in order to make your website do a barrel roll.


Modernizr is pretty good at writing conditional Javascript and CSS allowing you to make sure your users achieve ultimate happiness despite the fact that they are on an older browser or somehow turned javascript off.

Also, it has the html5shiv included, which does a nice job of converting your html5 into code usable by aging browsers.


Spend less time head-desking by normalizing your styling across browsers. Try it out for yourself.

Print styles

I know what you're thinking. You're thinking, "What the hell is a printer?"

Well, my friend, a printer is a noisy machine that vomits colored goo onto dried tree pulp. Some people (likely the same people with javascript turned off) will try to print your website. Make sure it looks good when they do by having a good ol' set of print styles.

Google Analytics

It's an infographic all about your website and all it takes is a set of numbers from your analytics account.

Tons of other cool stuff

Really, there are boatloads of features put together by humans far smarter than I.

See for yourself!


Mixin library

Fact: Mixins make your CSS life 73% happier.

They look like this:

@include transition(width .2s ease-in-out, height .2s ease-in-out);

And output this:

-webkit-transition: width .2s ease-in-out, height .2s ease-in-out;

-moz-transition: width .2s ease-in-out, height .2s ease-in-out;
-ms-transition: width .2s ease-in-out, height .2s ease-in-out;
-o-transition: width .2s ease-in-out, height .2s ease-in-out;
transition: width .2s ease-in-out, height .2s ease-in-out;

Because I'm paranoid and like things my way, I have my own favorite mixin library. It's 100% not as classy as compass, but the beauty of it is that it's optional. That being said, the mixins included are pretty fucking awesome. Especially that super long transition mixin.

Premade styles

I put together some nice sets of premade styles I like to call 'partials.' The partials are optional style sets that can be included or not depending on need.


Make and customize sweet buttons. Fast.

Like this.

Style your forms the lazy way.

Bootstrap responsive grid GENERATOR!

I made some SASS magic happen to generate the same overwhelming amount of classes that you use on your Bootstrap.

Hamburger menu

It's a neat responsive menu made by this guy that relies on the checkbox hack. No javascript required and all your Facebook friends will already know how to use it.

Mmmmm... burger.

P.S. Make your window super skinny to witness it in all its glory.


Let's be real about this. LESS is pretty dandy and is the first dynamic stylesheet language I learned. And it is/was awesome. However, after really digging into SASS, I've discovered just how slightly more useful it can be.

For those who have never used either, know that you can use regular CSS in .scss stylesheets. SASS just makes your life incredibly easy by eliminating vendor prefixes and allowing you to write mixins, use variables, and do math!

No matter what your skill level, I encourage you to try it out and see how you like it.

Get SASSy!

Bonus features!


I put every current html tag I could think of onto one awesome display of elements! Because I could. It's searchable and allows speedy styling all of your base elements.


There are zillions of comments throughout Anvil documenting all the interesting slices of code. You may want to remove the few comments from the HTML templates before publish. Nearly all the comments in the .scss files are single-line comments and are stripped out when Hammer compiles.