9 Top Tools for Creating Bootstrap Themes & Templates
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.
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 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.
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.
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.
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.
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 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.