# Rapid Web Design Setup for Windows

Normally I like to do my development in OS X, but because of a new job I have taken, I have to use Windows. Since we are starting a large redesign, I found this to be the perfect time to get some modern tooling in place, and this is what I have been using to quickly change and view stylesheets.

## gVim for Windows

I have been using Vim for years, but any text editor will do. If you’re new to Vim and want to try it out, I recommend starting with vimtutor.

## Chrome Web Browser

On the Mac I usually just use Safari, but on Windows I go with Chrome. Chrome also has a lot of nice extensions for developers available. Since WebKit is the most common rendering engine on the web today, it’s hard to go wrong developing for a WebKit-based browser first, and then checking/fixing problems in other browsers later.

## Compass

Now things start to get interesting. Before you can install Compass you’ll need Ruby. Currently Ruby 2.0.0-p0 is the latest release, but since it just came out and I’m not familiar with the changes, I opted for 1.9.3-p392. You can get a Windows installer from the RubyInstall for Windows download site. I chose to add the Ruby to my path.

Once Ruby is installed, there will be a new application in your start menu called Start Command Prompt with Ruby. I just searched for “Ruby” and it came up. To install compass, simply run the command gem install compass --no-rdoc --no-ri. The two options aren’t necessary, but it did speed things up quite a bit for me.

Now that compass is installed, cd to your project directory. Now you can create the necessary Compass files. In this example, I put things into an assets directory.

cd path\to\project
compass create assets
cd assets
compass watch


Since we are working with local files, we will need to modify the HTML lines just a little from what was output from the create command above. Here is a sample HTML index.html file.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Compass Demo</title>
<link href="assets/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="assets/stylesheets/print.css" media=“print” rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="assets/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->

<body>
<h1>Hello, Compass!</h1>
</body>
</html>