Using Hammer & LESS To Speed Up Bootstrap Theming

Bootstrap theming is really taking off. There are a number of marketplaces offering themes for sale and it’s a great way to create some passive income. Many developers stay away from Bootstrap templates because they feel it takes too much time and effort to fully theme the framework. It does take some work, however, with a few key tools you can speed up the process and start generating themes easily.

Hammer

Hammer is an amazing tool that provides a ton of useful functionality for developing themes and static websites. Goodbye PHP includes! Hammer allows you to use HTML includes and variables in your page templates This is super valuable when developing themes and templates. Hammer compiles languages like SASS, CoffeeScript, HAML, and Markdown into HTML, CSS, and JavaScript automatically. Finally, Hammer allows you to optimize your output by compressing, concatenating, and optimizing your production build files.

Hammer offers even more features that are outlined on their website at hammerformac.com. It’s not a free app, but it’s priced very reasonably at $24. Believe me, you will get your moneys worth quickly.

Anvil

Anvil is from the makers of Hammer. Although you can use Hammer without Anvil, they are designed to work together and I would suggest using both. Anvil is a localhost server that will allow you to preview your themes locally during development. The nice thing about Anvil is that it requires zero configuration and is much easier to setup than something like MAMP. Another great aspect about Anvil is that it’s free for download from anvilformac.com.

LESS

LESS is a CSS Pre-processor that extends CSS adding features like variables, mixins, functions, and other techniques that make CSS more maintainable and easier to write. At this time Hammer doesn’t compile LESS, but I’ve figured out a work around that will allow you to do so.

To use LESS with Hammer, you’re going to need to run a LESS compiler in the background. Head over to the LESS app website, download it, install it, and fire it up. Once you’ve started it up, add your CSS directory to the compiler. When you add your directory, it will load in any LESS files contained within. This also includes any LESS files in sub-directories. If you are importing component LESS files into a master theme, make sure you uncheck the component files. You only need to compile the master theme where you are importing your other LESS files.

Once you’ve included your LESS theme file, you’re going to want to compile it for the first time. When you do that it will create a vanilla CSS version of your theme. This is the file you want to link to in the Hammer header include. If you leave the LESS compiler on in the background while you work, every time you save your theme.less file, it will automatically compile it into CSS. Hammer can then pick up that CSS file and you’re changes will be shown on your local version in your browser that you are using Anvil to generate. Sometimes there might be a slight lag between the changes compiling and them showing up in your browser. Just be patient and refresh your browser a couple times. Sometimes you may also need to save your theme.less file again if the compiler doesn’t initially pick up the change.

Using LESS Components In Your Theme

One of the quickest ways to speed up theming is to componentize your theme. What this means is that you should break each Bootstrap component into it’s own LESS file. You’ll want to create a sub-directory under your CSS directory and save all your component LESS files there. You can upload this component to a bootstrap builder and use it online.

css/components/file.less

Here’s a list of components I would recommend breaking out into their own component LESS file:

• tables
• forms
• buttons
• images
• helpers
• typography
• icons
• dropdowns
• button groups
• button dropdowns
• input groups
• navs
• navbar
• breadcrumbs
• pagination
• labels
• badges
• jumbotron
• page header
• thumbnails
• progress bars
• media object
• list group
• panels
• wells

Also, don’t forget all the Bootstrap JavaScript components:

• modal
• scrollspy
• tabs
• tooltips
• popover
• collapse
• carousel
• affix

If you haven’t already, create a theme.less file and save it to your CSS directory. This is going to be your master theme which you will load all your component files into. Within the master theme, you need to import all of the component LESS files you just created. You can do this using the CSS @import rule.

@import "components/tables.less";
@import "components/forms.less";
@import "components/buttons.less";

etc…

When you compile your theme, all of the component files will be imported into your master theme. Once you’ve updated your project in the LESS app, make sure you uncheck all the files except for theme.less. Why would we want to do this? When you compile theme.less it will automatically import your component files and compile them. There is no need to compile them separately.

You’ll also want to uncheck the minify checkbox. We don’t want to minify the CSS file that is outputted as that would be really hard for your customer to edit once they buy your theme.

Your theming environment is now setup. The reason we break each component into it’s own file is because it makes it easier to quickly customize Bootstrap component by component. If you break the theming down into a number of smaller steps, it’s not as daunting and makes your theme more maintainable.

The final step is to start adding custom styles for each component and building out your theme. Before you start on any page layouts, I would recommend fully customizing each component. It’s much easier to build out page layouts when you have a complete set of components to work with. Once you’ve done this one, it makes it much easier to build other themes using your first as a starting point.