Building Twitter Bootstrap with Web Workbench

Less is a handy productivity language for Web developers, allowing you to almost elimininate duplication from your CSS while still being familiar to CSS developers. It’s even won the love of Twitter, whose Bootstrap library is a popular starting point for modern Web site designers.

Web Workbench is our Visual Studio integration package for Web productivity languages and it includes Less, so you can use it to work with Twitter Bootstrap from source. However, there are a couple of subtleties so I thought I’d walk you through the process.

Include the Twitter Bootstrap Less files in your project

This is about as exciting as a not very exciting thing. Download the Twitter Bootstrap source, unzip it, copy the files to your project folder and use Include In Project to add them to your project.

Choose the compilation settings

You’ll normally want to compile only the Bootstrap.less file. The other .less files get imported into Bootstrap.less and generally can’t be built separately. So go into Mindscape > Web Workbench Settings, and turn off Compile for everything except Bootstrap.less.

(Yes, we know this would be less boring if we had multiple selection or a ‘turn off for all’ button. We hear you!)

Note that Less compilation is available only in Web Workbench Pro. If you’re using the free edition of Web Workbench, you’ll get highlighting and intellisense, but you’ll need to upgrade or use a separate compiler to generate the CSS.

Force a recompile

Web Workbench detects when compilation settings have been changed and recompiles. However since you haven’t changed the setting for Bootstrap.less, just left it as it was, Web Workbench may not pick up that it needs to compile Bootstrap.less right now. In that case, just uncheck and recheck the Compile box, then click Save or Save All to force the recompile.

Enjoy your shiny new CSS file!

Web Workbench performs the compilation in the background so it may take a couple of seconds, but before too long you will see a pair of shiny new CSS files appear in your Solution Explorer:

You can now use these CSS files in your project to make your Web site look awesome!

Compilation error?

Twitter Bootstrap requires Less 1.3, which means you need an up-to-date build of Web Workbench. If you get a compilation error, go to Extension Manager and check what version you have installed. You need build 20062 or above. If you have an earlier build, go to the Extension Manager Updates tab to download a more recent one (it may show a “No updates found” message for a few seconds, so be patient!).

Editing the Bootstrap files

When you dive into editing the Twitter Bootstrap .less files, you may see warnings from Web Workbench telling you that a variable or mixin is unknown. This probably means the required declaration isn’t @import-ed into the file you’re editing; instead, Bootstrap.less will import the declaration before it imports the file you’re editing. For example, the wells.less file uses the .border-radius and .box-shadow mixins from mixins.less, but it doesn’t @import mixins.less. So if you edit wells.less, you’ll get blue squigglies on those mixins:

Although these warnings are benign, they’re annoying, and they risk hiding genuine mistakes, for example if you mistype .border-rdiaus. To address this, you can tell Web Workbench that you expect other files to be imported alongside this one, so it can assume those files are available even though they’re not @import-ed, by using a specially formatted ‘ww-expect’ comment: //* ww-expect "other-file.less". Note the * immediately after the // and the quotes around the filename.

(We’re working on a friendly user interface for this, but for now you need to use the comment.)

Bootstrap yourself in

In this post we’ve seen how to compile Twitter Bootstrap using Web Workbench, and how to tell Web Workbench about dependencies so that you can avoid spurious warnings when editing the Bootstrap files. Bootstrap is a great toolkit and we reckon Web Workbench is a great way to work with it — check it out!

Tagged as Web Workbench

2 Responses to “Building Twitter Bootstrap with Web Workbench”

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top