There’s no way around it. Creating a theme for Bootstrap can be a big job. Coming up with a look and feel is the first step but applying it can feeling daunting. Don’t fret, there are tools you can use to speed up the process and even make it enjoyable.
Here’s a list of the best tools I’ve discovered for developing Bootstrap themes.
Sublime Text 2
This one might seem obvious but you have to use a decent code editor if you want to efficiently code Bootstrap themes. Sublime Text offers a couple of simple features that will make your life easier and speed up your process. First I like to to divide my window into two columns. On the left I have my HTML page and on the right I have my CSS file. As I’m building out components I can switch back and forth between views. To access this view go to View > Layout and choose Columns: 2.
The second simple feature you can use is the side bar. To turn it on, go to View > Side Bar and choose Show Side Bar. Once the sidebar is on, go to File > Open Folder and choose the folder for your project. This will load all the files for your project directory into the side bar. Now you can open files with a single click on them in the side bar. Another simple trick but it will save you a ton of time. If you’d like to learn more about using Sublime Text, you should check out Wes Bos’ book Sublime Text Power User.
Hammer
When developing Bootstrap themes on a Mac, a powerful tool you can use is Hammer. Hammer allows you to super-charge your theme development with the use of HTML includes, variables, clever filepaths, and autoreload. You can work with languages like SASS, CoffeeScript, HAML, and Markdown and then compile everything into vanilla HTML & CSS. My eBook Mastering Bootstrap covers this topic in detail.
Anvil
Anvil is a menu bar app for managing local websites. It’s from the same developers behind Hammer and works hand in hand. Use Hammer to build and compile your themes, then use Anvil to preview them locally. You have everything you need to to develop themes locally then ship them to your customers.
Less
If you’ve been using Bootstrap for awhile then you’re likely familiar with using Less. If not, what are you waiting for? Using a library of Less variables through all your components is one of the best things you can do to speed up theme development. Change things like colors, fonts, borders, margin, padding, etc… in one place. I wrote a post here last year called Take the pain out of Bootstrap theming with Less. Check it out for more detailed instructions on how to use Less in Bootstrap.
Grunt
Grunt is a JavaScript task runner. If you’re looking for ways to speed up your theming process you want to automate repetitive tasks and Grunt can help with that. Grunt is like Hammer but you get more control. It runs from the command line and uses Node.js. You’ll need to install Node locally first if you’d like to use Grunt. Once you have it installed, check out the Getting Started guide.
In the docs you’ll notice you need to create a package.json file. This file will install all the required dependencies for your project. Some of the dependencies you’ll want to include are for Bootstrap, Less, and concat at a minimum. Just search for “Bootstrap” npm package to find the correct code snippets you need.
The next thing you need to do is setup your Grunt file. Each Grunt project requires a Gruntfile.js where you load in your project configuration. Import the package.json file, setup the paths to your source and destination files, and load any special npm plugins. There is much more you can do here but that’s generally how it works. Once you’re done setting up your Grunt file you can start to build your project. When you’re done use Grunt to compile the production version for you.
MAMP
If you’re looking for a full featured localhost server, I would definitely checkout MAMP. MAMP allows you to run things like PHP which can be useful when integrating Bootstrap into a WordPress theme. This tool is for the user that wants a real server-like environment on their local machine.
Bootstrapdocs
This is a handy site that has archived the Bootstrap documentation for all previous versions of the framework. If you find yourself still using an older Bootstrap version, this website has a legacy version of each docs site you can use.
Glyphsearch
The icon web font that comes with Bootstrap is awesome but it’s huge! Glyphsearch allows you to search for icons in the set and will spit out the CSS class names for you. You can easily copy them and paste them into your layout. This will save you many hours of looking up class names.
Harp
Harp is my current tool of choice. It provides the ease of Hammer with the control of Grunt. The problem with Hammer is that if you want to use something like Less it can be tricky; possible but tricky. Compared to Grunt, you get all the control but it can be quite technical to setup. Harp falls right in the middle for me. It’s a command line tool so you need to be comfortable there but it’s much easier to setup. Again you need to install Node and then install Harp. With only a couple commands you get access to things like HTML includes, variables and auto-compilation of Less. Harp also offers support for SASS, Stylus, CoffeeScript, Markdown, Jade and EJS.
I’ve just released a free email course called Bootstrap Themes Made Easy which explains how to create a Bootstrap theme with Harp. Register for free at bootstrap-themes.ca
