Get Chirpy To Play Nice with Twitter’s Bootstrap

I have begun using Twitter’s Bootstrap framework to build administration sites for the MVC apps that I am building. Bootstrap makes it trivial to keep all of the views clean and consistent–without needing to get a graphic designer involved. You can see it in action in the example app for my MongoDB utility project, BrainDonor.Mongo. Unfortunately, the bootstrap source .less files refuse to play nice with Chipry!

Why is this a problem? If I wish to make a simple change such as modifying colors in Bootstrap, the most consistent way to do this is in the .less sources. In theory, I should be able to just include the bootstrap.less file in my Chirpy bundle and let it build everything. The .less compiler included with Chirpy just isn’t able to handle it. I’m a lazy developer who to eat his cake, so how do I get a work-around in place quickly?

Going back to using dotless is the key. I previously used it for some clients to parse .less files on the server as they are requested by browsers. This dependence on server-side parsing of less files is one of the main reasons that I moved to Chirpy.

To solve this, I have created folders named /Content/css and /Content/less. I have downloaded the .less source files for bootstrap and placed them in the /Content/less folder. The top level files for Bootstrap are bootstrap.less and responsive.less. Next, I created the following pre-build task for my web project:

$(SolutionDir)packages\dotless.\tool\dotless.compiler.exe $(ProjectDir)Content\less\bootstrap.less $(ProjectDir)Content\css\bootstrap.css
$(SolutionDir)packages\dotless.\tool\dotless.compiler.exe $(ProjectDir)Content\less\responsive.less $(ProjectDir)Content\css\responsive.css

Please notice that I have removed the -m option so that dotless is not attempting to minimize the less files. I prefer to only do that only once–and Chirpy has continued to compress .css files as expected. Unfortunately, I do have to include the dotless version in the path…so this needs to be updated anytime I upgrade dotless.

Now, with just a quick build, dotless will compile the css files and Chirpy will bundle the css files as needed!