Use WebPutty To Prototype & Maintain The CSS For Your Websites

Ads by Google

prototype css changeI 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.

Starting 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:

prototype css change

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:

prototype css

Ads by Google

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:

prototype css

When you try editing the CSS for a new website, you’ll get this alert:

prototype css

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:

maintain css

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:

maintain css

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:

maintain css

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:

image

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:

image

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.

Wrapping Up

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:

prototype css change

In other words, stock-standard CSS.

Final Thoughts

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?

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Awesome Websites
Awesome Websites
137 Members
Deep Web Communities
Deep Web Communities
80 Members
Best Anonymity Tools
Best Anonymity Tools
73 Members
Tips for Privacy Obsessed
Tips for Privacy Obsessed
44 Members
Best Music Services
Best Music Services
43 Members
Online Security Tips
Online Security Tips
41 Members
Web for Kids
Web for Kids
32 Members
Graphic Design
Graphic Design
31 Members
Ads by Google
Comment (1)
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.