Dovetail BOLT: Now built with Twitter Bootstrap
Sam Tyson
August 31, 2012

 

Since I use BOLT almost everyday as a developer, I committed some time to upgrade the look and feel of the app.  In the process of the upgrade, I also added many improvements to the html, javascript, and sql.

 

Twitter Bootstrap

 

The big change was to update the CSS used, and I wanted to use (and learn) Twitter Bootstrap. Twitter Bootstrap is a powerful front-end framework designed for faster and easier web development. It is maintained by developers at Twitter, and has a great community of support.

 

Twitter Bootstrap was built to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. Taking advantage of this in Dovetail Bolt makes it much easier to support and maintain.

 

For comparison, here is the new look:

 

new

 

and the previous look:

 

old

Availability

 

Another big change for the application as a Dovetail Software product was to move the source code to a public GitHub Repo. GitHub is an open source version control system, and as of May 2011, GitHub was the most popular open source code repository site.

 

Using GitHub makes the Dovetail Bolt publically available to anyone, and made the need for an installation process and a compiled help file obsolete. Anyone can clone or fork the project, and have access to the latest, greatest version of this application. For help getting started with GitHub, head to this site https://help.github.com/. For help with Bolt, contact Dovetail Support.

Themes and Bootswatch

 

BOLT is currently on Bootstrap Version 2.1.0, which is the latest stable version. This allows the use of themes that are available for the current version.

 

I recently discovered Bootswatch (http://bootswatch.com/), a site with free themes for Twitter Bootstrap. There are currently 12 themes available from the site. They also have a bookmarklet available, which is a tiny script that adds a simple way to try out different themes in Dovetail Bolt, or any Bootstrap site. To install the bookmarklet, scroll down to the bottom of the Bootswatch homepage, and drag the “Bootswatchlet” link to your bookmarks bar. The only downside of the bookmarklet is that the change only applies to the current page, and reverts back as the next page is loaded. But, it is a good way to test out different styles.

 

Here is the same page as the first look above, but with the Cyborg theme applied using the bookmarklet:

 

cyborg

Future Plans

 

I have big plans to incorporate theme support into Dovetail Bolt, but I need to figure out the best way.

 

One of the other cool things about GitHub is that users can also submit issues, pull requests, and experiment with their own project. Pull requests are user submissions that get reviewed and possibly included in the base project, so please submit any great new ideas that you have for Dovetail Bolt!

 

Leave a Comment

International: +1 (512) 610-5400
Toll Free: 1 (800) 684-2055