Use WebPutty To Prototype & Maintain The CSS For Your Websites

image66   Use WebPutty To Prototype & Maintain The CSS For Your WebsitesI 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:

image67   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image68   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image69   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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

image70   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image71   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

SNAGHTML128e2961   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image72   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image73   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image74   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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:

image75   Use WebPutty To Prototype & Maintain The CSS For Your Websites

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?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

One Comment -

0 votes

Aibek

let us know your thoughts once you have tried it