I’ve always shunned paying for HTML and CSS development tools, because all you really need is a good text editor. The other day, however, I downloaded Skybound’s Stylizer 5 and promptly dropped the small chunk of change required to activate it.
Stylizer, which is available for both Mac and Windows, is a visual css editor like no other. The Skybound website claims that it is “shockingly more productive”, and even though I was skeptical at first, I’m a utterly convinced now. Stylizer makes working with CSS incredibly easy, without sacrificing any control.
Real-time Preview and Remote Controls
The first thing you’ll notice when launching Stylizer is that it is a browser. You can load any web page by typing its URL in the address bar, or load any HTML page from a local folder. Stylizer displays a live view of the page and loads all of its linked style sheets into tabs on a sidebar.
Stylizer updates its preview in real time as you make changes to styles, no refreshing needed, and it automatically refreshes the page if you make changes to the underlying HTML, although you’ll have to use another application to do so. All of this makes stylizer the perfect companion to a good HTML editor: keep them both open and you never need to do the save-switch-n’refresh dance.
On Windows, Stylizer previews pages in several different browsers, including IE 6-8, Firefox 2+, and Google’s Chrome. On Mac you’ll only get Webkit. I’ve had a little trouble getting the IE 6 rendering engine to work on my Windows 7 machine, but all the others work flawlessly.
Next you’ll notice Stylizer’s buttons that float just underneath each selector in the sidebar. Stylizer calls these “remote controls”. They can be a bit daunting at first, but once you get the hang of them you’ll wonder how you ever worked without them.
These sleek little buttons are the “shockingly more productive” part of Stylizer. You can set (or unset) all the most common css propertiess with a click, or you can click-and-drag to change margins, dimensions, and placements in real time. Slide your mouse across the desk and watch in amazement as elements slide smoothly across your layout. These controls make pixel perfect adjustments actually fun! No more guessing, reloading, guessing again, etc.
Bullseye, Stakeout, Lens, and Rulers
Want to create a new selector? Bullseye hits the… well, bullseye. Simply tap the space bar and click on an element in the preview. Stylizer displays a series of buttons representing the element’s ancestry at the bottom of the screen. Click the ones you want and, boom, instant selector creation. It’s devilishly simple. Stakeout works the other way around. With Stakeout enabled Stylizer’s preview displays a red border around any elements targeted by the selector currently being edited.
Stylizer’s lens and ruler make it easy to position elements and backgrounds perfectly. Lens is a magnifying glass which you can lock in place over the preview, and the ruler allows you to get perfect measurements of anything on the screen.
All four of these features are remarkably intuitive. They are tools you never knew you needed, but once you use them you won’t want to let them go.
But it’s still a text editor (sorta :)
For all the fancy visual editing mojo, it’s hard to remember that Stylizer is still a text editor. Although technically Skybound refers to it as a “grid based” editor, the distinction is semantics in my opinion. All the basic keystrokes do exactly what you would expect them to do. Press enter to go to the next line, press tab to change between a property and its value, etc. I was instantly at home using the keyboard. Stylizer even offers code completion and a set of poweful snippets.
Of course, you never have to worry about formatting your code or forgetting a semicolon. Stylizer automatically formats your code perfectly every time. You can even customize every detail of how Stylizer writes the CSS code. I feel like I have more control over the code with Stylizer than with a true text editor.
This is hands-down, Stylizer’s best feature: all the power of a fantastic visual editor AND all the power of a fantastic text editor. Stylizer is a truly revolutionary interface.
Not just a pretty face
Under the pretty UI Stylizer packs some heavy duty punch. You can save your style sheet to the local drive, a network share, or an ftp/sftp host, And once you save it, Stylizer remembers that location for the future. You can even save drafts of your style sheet and revert to them when needed. You can also bookmark pages for quick access.
Also, Stylizer’s powerful snippets make complex CSS code drop dead simple. Type the magic “+border-radius” property, for example, and Stylizer creates all the css properties needed to make this CSS3 functionality work in every browser that supports it.
What’s not to like?
A few things actually. For all its awesomeness there are some things that I think could be improved. Most notable is the lack of proper documentation. The tooltips are helpful, but there is no true instruction manual. Unfortunately that means you have to discover some of Stylizer’s more useful features and keyboard shortcuts through experimentation.
The activation requirements are also a bit draconian. Before activation is granted stylizer requires basic information about your system’s hardware be sent to Skybound. Of course, I can’t really blame them for wanting to protect against piracy. Especially among developers who have a pretty strong sense of “open source entitlement”.
It’s also worth noting that one activation key will allow you to install the program twice. Once on your laptop, and once on your desktop, and the same activation key works for both Mac and PC versions. I installed Stylizer on both my MacBook Pro and on my Windows 7 desktop.
Another minor annoyance is the need for a separate application to edit HTML, but even so my workflow has actually become simpler with Stylizer. With Dreamweaver I was constantly switching tabs between HTML and CSS edit modes, and then flipping over to Firefox to “preview” my work. With stylizer I don’t need Firefox and there really isn’t much difference between switching tabs and switching apps.
All in all, Stylizer is a fantastic program and I’m extremely satisfied with it. Try it for a day and you will be wondering how you ever coded CSS without it.
