A front-end template for kit.
- print styles
- Google Analytics
- a whole bunch of other cool stuff
- optional mixin library I wrote
- optional partial style sets
- responsive Bootstrap Grid generator
- hamburger mmmmmmmenu
- All single-line comments
//in the SCSS files are stripped in the build files.
- All single-line comments
- includes just about every non-depreciated HTML element on one page for quick styling.
Anvil install and publish instructions
- Download the latest version of Codekit.
- Download the latest version of Anvil and rename the root folder to the name of your site.
- Add the site to Codekit.
- Build your awesome website.
If you take a look at
index.html in your editor, you'll find it is mostly kit imports. See kit's documentation for full documentation.
The most basic and super useful helpers are the HTML includes
Personally, I prefer to do a good portion of my styling before I add any classes. To make this easier on myself, I've added just about every non-depreciated HTML element to this single page. Ideally, you would use this to set your global styles in
You can search for any element by tag,
<pre> and most elements by namde,
This shows off a responsive menu very similar to a bagillion app hamburger menus. Hamburger refers to the three bar menu icon. It is almost entirely based on Tim Pietrusky's Off Canvas menu. Customize it in
Straight from HTML5 Boilerplate. Except for really minor changes. I suggest making it into something surprising and useful to visitors with your webby skills.
style.scss is where every SCSS file is pulled into and determines the order the styles appear on the build
style.css file. The comments provide brief descriptions of what each imported file contains. Note that all single-line comments are stripped from the build file.
Put all your main styles in
_main.scss. If you're unfamiliar with SASS, don't sweat it. Standard CSS works just fine.
For those of you who love your SASS, check out
_mixins.scss to see some of my shortcuts.
These are optional sections that might come in handy and save you a little styling time. I'll probably add more or remove them depending on the responses I get.
Fairly light code that enables you to quickly create a horizontal menu from the following:
<nav class="nav-horizontal"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Nested Link</a></li> <li><a href="#">Nested Link</a></li> </ul> </li> </ul> </nav>
Two button sets are included. Form buttons with out classes and a button class for styling a links or whatever you like as a button.
Two form element sets are included. The default active one is for all form elements without the need for classes. The commented out section below is useful when you want to make multiple form styles.
Super sexy Bootstrap-style grid generator. It uses the same syntax as the responsive Bootstrap grids. You can change the variable values to generate your own preferred grids. This currently does not support fluid, percentage-based, grids. Yet.
This utilizes a checkbox hack in order to create a Google or Facebook hamburger-style menu. See it in action on
hamburger.html. Note that using it as a responsive menu isn't exactly the most semantic option, however, it sure is neato.
Things to note
If you don't plan on using one or more of the partials or SCSS files, simply comment them out. Again, anything commented out with a single-line comment
// will not end up in the final build. You can always add it back in later.
Go to HTML5 Boilerplate's website, if you haven't already, and familiarize yourself with the endless goodies they've put together. Most of those are in Anvil.
I made this entirely for myself. I
encourage dare you to make something even better.