March 11th 2008 | Jens C Brynildsen
In the flurry of talk about Silverlight at Mix08, we noticed an interesting little piece of software that was released just now. Eric Meyer's CSS Sculptor is now available for Expression Web as well as Dreamweaver and this is something we've been missing for years.
Just to get it out of the way - we've been really disappointed with the last two Dreamweaver releases. While the world moved on to CSS based layouts and full standards support, the Dreamweaver team were really just stirring the pot without adding anything of real value. The last years, we've used Firebug and the FireFox Developer toolbar to solve CSS issues and ensure standards support.
Sure, the colored div-tags and pre-made CSS layouts are alright for debugging and as a starting point. Dreamweaver have also gotten better at displaying CSS layouts, but it's still far from perfect. If you use Dreamweaver to create CSS based websites, you're pretty much in the dark if you need anything other than the predefined layouts and there's not much extra help to get. Microsoft must have noticed this and they now have a very decent web authoring tool called Expression Web that outputs beautiful and standards compliant code just like Dreamweaver. Microsoft just added support for like PHP and why throw in decent Actionscript support in Expression Web as well? Not very likely, but maybe it could make the Dreamweaver team wake up. Enough sour grapes - what's so cool about "CSS Sculptor" then?
CSS Sculptor is a plugin for either Dreamweaver or Expression Web. It's essentially a "Wizard" created by WebAssist in collaboration with the reknowned CSS expert Eric Meyer. By just following through the tabs of this wizard, you'll be able to create great starting points for CSS based layouts. The generated code and CSS looks just beautiful and it's really something to build upon. Every bit of the CSS is either created or supervised by Eric Meyer so you know this'll just work across all browsers. Standards zealot Jeffrey Zeldman says it "makes it drop-dead easy to create standards-compliant, two- and three-column CSS layouts in Adobe Dreamweaver".
You start by selecting the basic design from a predefined selection. Add any number of flexible or fixed columns. Want a header? Just tick a box. Same goes for navigation and the footer. The wizard takes you through six steps: Design/Layout, Padding/Naming, Typography, Background and images, Print stylesheet and the final output of files. Every step is well explained and laid out so even novices should be able to create a standards based site using this plugin. The print stylesheet is super-easy to create while still looking good and all the resulting CSS looks just like you would want it to. Tidy and cross browser safe. No failing margins or paddings due to a clever CSS reset at the start of the document. The product only provides you with a good starting point though, so it's still possible to screw things up after you export, but this is so much closer to what I expected Adobe to deliver in Dreamweaver 8 (or at least CS3). Now the problem is solved by a third party and also integrated into the competing product as well. Must feel like someone at Adobe missed a boat?
Difficult CSS stuff like minimum and maximum widths are handled by just entering the values and it'll work in all browsers without you thinking about it. The product is only $99 so we'll be sure to use this code as a base for the upcoming redesign of Flashmagazine as it seems rock solid. The WebAssist product page features a tour hosted by Eric Meyer himself gives a nice overview of how the wizard works.