There’s a ton of great web development-oriented web apps out there, everything from in-browser image editing tools to full-fledged cloud IDEs. It’s evident that you don’t need a ton of expensive software to develop websites, and even a Chromebook can be turned into a great little web development machine.
Today we’re going to take a look at WebPutty, a CSS editor based in your browser, complete with previewing new styles on existing sites. WebPutty is a simple affair, allowing you to create a site and load it up in the editor with the CSS editor beside it. Here you can manipulate the styles in real-time, previewing them before exporting and publishing to your live site.
First Steps
Your first step with WebPutty is to create a site within the app’s interface. This is done by clicking the “New Site” stack in the Coda-esque chooser and simply naming the site and giving it a URL.
Creating a site in WebPutty.
Once that style is created, an aforementioned Coda-style stack of papers is added to your dashboard which conveniently helps to organise all your pages, helpful if you’re working on multiple projects simultaneously. WebPutty even pulls in a screenshot of your site, which is a very nice touch.
WebPutty requires you to add a little Javascript into your website’s header in order to provide you with the necessary previewing tools. I would have liked this setup to be a little more automatic, such as WebPutty automatically picking out the stylesheets and allowing you to select one to modify. Nevertheless, it’s not a very cumbersome task to add this Javascript in.
Working With Your CSS
Again, WebPutty isn’t as seamless as I would have liked in this respect. Even when you’ve added the code to your header, WebPutty doesn’t automatically grab your CSS file. Instead, it requires you manually copy across your stylesheet into the editor. I definitely would have been able to award WebPutty more points if it were just that little bit more automatic and seamless.
Perhaps the biggest obstacle is that your CSS is sandboxed, and has no relation to your site when it’s being used in WebPutty. If you copy across a stylesheet that references images in a directory of your site (i.e. something like /images/backgrounds/main.jpg versus http://web.appstorm.net/images/backgrounds/main.jpg), WebPutty can’t find them and this is reflected in your design preview, which is a pretty big deal. The only workaround is to, presumably, use the full URL to the images which isn’t the best way of doing things. It would definitely be nice to have seen a universal directory to point links to, but, alas, there isn’t.
Where have all my images gone!?
The alternative method of modifying your CSS is to not edit your entire stylesheet, but just work on the new and/or modified styles. This doesn’t fix the image problem, but at least doesn’t interfere with those already on the site. As you can see in the image below, the only style added to the editor is a universal text colour style that changes nothing but the text colour.
The CSS editing panel includes syntax highlighting, which is a necessity for this type of app, and supports SCSS editing too.
Changing nothing but text colour.
After Editing: Using Your New CSS
So, what happens after you’ve finished creating some new CSS? It’s a fairly simple process to render a plain text file of your CSS files, and consists of just clicking the “Export” button in the editing pane.
Interface
WebPutty’s interface is simple and straightforward and, aside from a minimal header and footer, consists of just two panes: the editor and the preview. The preview pane is effectively just a frame containing the associated site, with a drop-down menu above to switch between any associated preview pages. Another drop down menu allows you to swap between the styles you’re preview and those that are live on the published site. The editor is essentially a plain text editor with line numbering and nothing else.
How you choose to arrange these panes is an option split in two. You can either opt to have them stacked horizontally, or next to each other vertically, which is swapped by clicking on the toggle button (in the middle-left in the screenshot above). This is a simple swap and means you can keep changing views to better suit the specific style you’re working on at any given time.
The vertical viewing option in WebPutty.
Final Thoughts
WebPutty is a nice little utility but it’s not at the standard of native competition. Nonetheless, it works, but is more of a single-use, previewing tool rather than a utility to actually work in CSS on. There’s nothing especially wrong with what WebPutty does, but some annoyances like images and the manual setup don’t exactly contribute to it’s success.
Nonetheless, WebPutty is free and that can’t be argued with. It (kind of) does what it says on the tin, all in a straightforward interface that anyone should be able to pick up within less than a couple of minutes.