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.
<!-- @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
$body-class falls back to
default. Naturally, you may want to change these and can find them in
<-- @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.
<!-- @reload -->
Changes are detected and your pages are refreshed. Happy?
Read the Hammer documentation to better understand the use cases.
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.
I know what you're thinking. You're thinking, "What the hell is a printer?"
It's an infographic all about your website and all it takes is a set of numbers from your analytics account.
Really, there are boatloads of features put together by humans far smarter than I.See for yourself!
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.
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.
I made some SASS magic happen to generate the same overwhelming amount of classes that you use on your Bootstrap.
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!
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.ALL OF THE 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.