I maintain the CSS for a fairly complex website; my normal workflow is opening an SSH session with PuTTY and then editing the CSS within a remote instance of VIM. WebPutty from Fog Creek Software (Joel Spolsky’s company) offers a way to simplify this process and edit your CSS using the browser, with live preview and other goodies.
We featured WebPutty in the MakeUseOf Directory, but I was so impressed with it that I decided to take you on a more in-depth tour of what it can do. Before we dive in, the first thing you should know is that right now, WebPutty is free (for “early adopters”). So this is a great time to try it out.
You don’t need to open an account with WebPutty; it uses your Google account for authentication. Once you log in, you should see a dashboard similar to this one:
Of course, yours won’t say Tibbo – this is just a website I added using the New Site link you see on the right. Let me show you what happens once you click New Site:
Once you put in the name and URL of the site, simply hit Create. Then you’ll find yourself within the administration interface for that particular site:
When you try editing the CSS for a new website, you’ll get this alert:
It means you need to paste a bit of code into your website, before you can modify its CSS with WebPutty. The code looks like this:
This is the only drawback I could see when working with WebPutty. Those extra tags add a bit of complexity to your markup, and may slow down load time. We’re not going to be editing the actual code for MakeUseOf for this demo, so let’s switch to using WebPutty’s own built-in demo playground. It looks like this:
Of course, that’s when it’s all squished down for size, to fit into one screenshot. Let’s take a closer look at the editing side of things:
As you can see, the editor uses syntax highlighting, and by default includes SCSS and Compass. SCSS (or Sass) is an extension for CSS3 which allows some pretty fantastic syntax, such as variables and selector nesting. Compass is a CSS framework that makes it easier to implement CSS3 goodies such as box shadow, border radius, gradients and other nifty additions. In simple terms, this means WebPutty puts you on the road to writing cutting-edge CSS using some of the Web’s best frameworks.
When you click a selector within the editing pane, it gets highlighted in the content view:
The screenshot may be a bit difficult to make out, but what you’re seeing there is line 97 (containing the UL selector) is highlighted, and the horizontal UL on the page is automatically highlighted to correspond with it, so it’s very easy to tell what you’re going to change.
Any change you make is reflected instantly in the preview pane, just like when working with a desktop Web development tool. For example, let’s make the text bold:
That was pretty simple. One feature that’s sorely lacking, however, is auto-completion. You need to know CSS syntax very well to use this tool, because that’s one thing it won’t help you out with. That’s fine when it comes to “normal” CSS (which you may already be fluent with), but is a bit of a drawback when trying to learn SASS or Compass syntax.
Once you’re happy with your design, you can do one of two things: Hit the Publish button, or export a ready-to-use, indented CSS file. The exported CSS file looks like this:
In other words, stock-standard CSS.
WebPutty is not a tool for developers just starting out. But if you’re called upon to maintain or develop the CSS for a modern, full-featured website, and you’re looking for an alternative to PuTTY and VIM, you should definitely give WebPutty a spin. And if you did give it a spin, what did you think about it? Let us know in the comments. I’d also love to hear your thoughts about SASS and Compass – do you think these are good tools to use?