CSS Sculptor Released

Published 16 years, 7 months past

I alluded yesterday to “backstage work”.  One of the things going on back there was my work with the folks at WebAssist to create a tool that allows both novice and experienced web developers to create and alter CSS-driven layouts.

The end result is Eric Meyer’s CSS Sculptor (v1.0.0), a Dreamweaver extension that gives the user tons of options and outputs pretty darned clean markup and CSS.  (Even if you’ve no interest at all in Dreamweaver tools, you should still follow that link.  How many chances are you going to have to see me throw the mëtäl hörns?)

Well you might wonder how much code I contributed to this software.  Well, okay, none.  What I did contribute was guidance on the interface and its organization; on what options to present, and how; on ways to handle things like print styles and the print CSS options; and on the CSS and markup that results, including the optional explanatory comments in the CSS.

One of the primary goals with this project was to create a tool that would expose as much CSS as possible to users without overwhelming them, and that would actually teach by dint of showing all the options.  One of the things we heard a lot in the beta test was users saying things like, “Oh, so that’s what that CSS thingy does! I’d always wondered.”  Which was exactly what we’d hoped to hear, along with “Hey, I’ve never heard of this CSS property before!”.  (We heard that one too.)

There are some things I expect will be improved in future releases, like shorthand value minimization—the simplest example of that being a condensation of 0 0 0 0 down to just plain 0.  We discussed including that feature but decided to postpone it for a variety of reasons, not least of which was working out the logic required to figure out when to minimize, which isn’t as simple a problem as you might first think.  There were a few other things we didn’t get in the initial release; such is the way of software.  We’ve got a list of potential features, of course, and are looking forward to hearing what users suggest.

As for what features did make it in, there’s a fairly large list, so it’s probably best to check out the Features page or take the product tour—with video commentary starring, you guessed it, yours truly.  So if you’ve ever wanted to see me greenscreened over screenshots and being intermittently goofy, then at long last your prayers have been answered!  (Or will be, once we get the load problems resolved.)

What makes this whole thing an especially interesting experience for me is that, for the first time in my life, I’m participating in an affiliate program.  Basically, what I earn from sales of CSS Sculptor depends on affiliate fees earned by referral links like this one here (and also earlier in the post).  That might sound like a rip-off, but it has the potential to be quite the opposite.  The affiliate cut is literally an order of magnitude greater than any reasonable per-unit royalty would be.

This compensation scheme (as they say in the UK) is actually an experiment on both sides: WebAssist has never really worked with an outside individual on a product like this, and so they honestly don’t know if the affiliate approach will pay better than a per-unit royalty, or worse.  So we’re going to try it out and see what happens.  Fortunately, I’m in a position that I feel I can afford to experiment like this, allowing both myself and WebAssist to find out what works best in the long run.

Thus, if you’re planning to buy CSS Sculptor or know someone who is, I’d be grateful if you either clicked through one of the links hereabouts or linked to the product using my affiliate URL.  I’ll have a link in the sidebar in the near future as well.  The sidebar’s due for an overhaul anyhow.

So that’s one of the things that’s claimed my time over the last few months, and I’m pretty excited that it’s seeing the light of release.  I’m even more excited about finding out what people think could be better about it so that we can improve what’s already a pretty darned nifty tool.  If I do say so myself.

Comments (57)

  1. Congrats on the software release!

  2. Yep you throw mëtäl hörns alright, but what is it that you say? The sound didn’t come through when I looked and I couldn’t get the feature tour or the Solution Recipe to load… =( I mean they’d open up their respective windows, but then they’d just hang at “Loading…” and go no where…

    At any rate, I may just have me a good gander at this… nice to see you branching out into other arena’s…

  3. Jeff – C’mon, what else Eric say, but “ROCK!” On the Feature Tour and Solution Recipe, we haven’t seen the hanging issue you’re talking about. What’s your system and OS?

  4. Yes, it is a pretty darned nifty tool. The choice for using CSS Specificity, e.g., “#outerWrapper #contentWrapper #leftColumn1” was nice touch. Did you time this release for resolution of The Web Standards Crisis?

  5. If there was any better way to start the day than with mëtal horns, I would not know.

    Shame that the featured tour isn’t loading for me. The world of WYSIWYG editors could use some semantic sense of humor.

  6. Eric :)
    looks very intersting – though I’m a bit disappointed it’s for DW as I no longer use it. But congrats on the release – hope you’ll get great feedback :)
    (just to let you know – I had problems with viewing the Breeze content in the popups as well…)
    .. and who would have thought we’d see your mëtäl hörns!! :) rock on!

  7. I’ve used several of WebAssist’s tools and was pretty excited to see you associated with their CSS product, Eric! It definitely makes it something to look at seriously. Joe, although I was able to view the gallery, I’m experiencing the same hanging issue with the Features Tour. I’m running a new installation of WinXP SP2 on a Dell Dimension 4600 (2GB RAM).

    Hope this helps! I’d like to take a closer look.

  8. Can’t see the Features Tour on Windows Vista, IE 7.

  9. Yeah, we’re seeing more and more problems with the video tour. Sorry about that, folks! Joe suspects it’s to do with server load and the way Flash stream video layers. He’s working on the problem as we speak and hopefully it’ll get resolved soon.

  10. It’s looking like one of thoee “good” problems – all of our feature tours are extremely slow, so it’s the number of folks hitting the link at the same time. We’re looking into fixes.

  11. Congrats on the release Eric.

    Though I’d like to see you “greenscreened over screenshots and being intermittently goofy” it didn’t play for me in Flock0.9 on XP Pro.

    The mëtäl hörns made me smile this morning.

  12. Pingback ::

    eyedeas » Blog Archive » CSS sculpting anyone ?

    […] → read Eric’s post on CSS Sculptor posted by priscaAugust 23rd, 2007 filed in handcoding, thoughts […]

  13. :D The server load problem is not being helped by people like me who hit refresh three times just to see you go from demure to full-rock formation.

  14. Congrats Eric.. may have to give this a shot. Is there a projected timeline on a second release or is it a wait and see how the first release does.. type thing?

  15. Interesting.

    Noticed only minor implementation of reset rules. Might be worthwhile to consider an advanced version that includes the full reset, handheld style sheet generation [including the Meyer favorite, iPhone], automatic shorthand. If it did, might be handy for efficiency improvement in getting the basic grunt work out of the way in terms of style sheet and design rather than hard-coding the stuff. Would make a good learning tool, also. The conditional comment feature looks interesting. Examples shown do not indicate if external style sheets are created.

    Not crazy about the use of pop-up and images for the galleries presented on the WebAssist site. Actual code would be better – I went to the galleries to specifically view the CSS code of the various layouts and to see how the layouts would perform across various browsers, including browser window size and monitor resolution.

    Looks promising and authoring tools like these are definitely needed.

    Pricing and affiliate links? Offer a 50% professional discount that demonstrates use of an affiliate link? I am a cheap bastard.

  16. I’d be careful with this product. I just bought it and it’s not running on Dreamweaver 8 Mac 0SX. (Intel)

    Sorry Eric, but I cannot recommend a product that doesn’t work. By the way, webassist’s support is terrible!

  17. I couldn’t believe it when I saw it. Wait, yes I could.

    I’m buyin’ in soon.

    Your Father’s Oldsmobile would be proud of your horn flashing.

    See you at the NASA Explorer’s session later this year!

  18. Pingback ::

    Todo lo automatizable será automatizado • Grancomo

    […] el turno al arte y ciencia de CSS gracias a CSS Sculptor, un producto-extensión de Dreamweaver desarrollado por Eric Meyer que incorpora y automatiza las mejores prácticas del momento en la creación de […]

  19. Leadx:

    I’ve got it working on Dreamweaver 8 on my MacBook Pro. Give the product time — on first run it hangs a bit until the license key window opens. Once you’ve authenticated, it should run okay, albeit slowly.

    I did get a little bit of a runaround on the WebAssist site: to get to the download page (after paying) I had to login, but it wouldn’t take a new registration. I think a user name and password must have been generated automatically. Once I asked for a password email and reset it, the download went smoothly.

    Eric: I’ll be a face in the crowd at AEA Chicago on Monday. Looking forward to it.

  20. LeadX – We tested on both DW 8 and CS3 MacOS and it was working fine throughout the entire QA process. Can you contact me (jlowery at webassist dot com) or better still file a Tech Support incident. That will help us track down any problems you’re having.

    As for your comment on our support, we try harder every day and have recently enhanced our support staff. Our customer base has been growing steadily and we’re bolstering our support and documentation across the board. I think you’ll see a difference with this release and from now on.

  21. thacker – We looked at a fuller implementation of the reset rule but initially decided to pare it down a bit so that newbies wouldn’t be caught short when they didn’t specify particular values, like line-height. We’ll continue to monitor folks reaction to that and adjust accordingly.

    Hand-held style sheets was on the initial feature list, but got deferred. Your mention will move it up the list. :-)

    Re: the Layout Gallery. We used figures of the 30 standard layouts X 12 color schemes because we didn’t want to give the code away. You can see a code sample from the Showcase tab on the site.

    Appreciate the feedback – Joe

  22. Eric, where and when can I buy a t-shirt of you throwing up the mëtäl hörns? I think that might sell as well, if not better, than CSS Sculptor. ;) (I will also be at AEA Chicago on Monday. Can’t wait!)

  23. Lowery–

    Wasn’t anticipating a response. Thank you. A reset style sheet can be dropped in by the content developer easily … am assuming the reset that is used by the extension can be disabled. Would have purchased it if the extension included hand-held media [which includes screen media type for the iPhone], assisted in developing alternate style sheets [accessibility] and if I knew for certainty that external style sheets were created. I can foresee, with an enhanced version of this extension, getting back into Dreamweaver to create and speed up production of initial and basic design only functions.

    Again, thanks.

  24. @tacker: On the output tab you have the ability to either embed the css in the page, save it to a new .css file, or append it to an existing .css file. If you choose to use external css, it would link the files in the html, then open them up in Dreamweaver for review. So it definitely supports external style sheets like you mention.

  25. Who’s a rock star? :)

  26. Lowery – sent you an email…

    Lisa – I did close and re-open dreamweaver. I even did a restart of osx.

    Problem is not only that the program is extremely slow, it’s also un-usable. I’m not able to select anything.

    It’s very unstable, I don’t want to be a beta tester after paying.

  27. Rock? I always considered you a big band type of guy.

  28. Niiiiiice! I want to try it out – no trial version?!

    Not to rain on the parade or anything, but I should point out that Dreamweaver CS3 includes a number of CSS page layout templates. They are fully customizable, although you have to do it yourself. I like the idea of the GUI to manage it all for you.

  29. What?? You mean you don’t use my CSS Box Model Exploratorium anymore… it’s a sad day. :-)

    Looks great – I’m sending all my Dreamweaver-using friends your way, that’s for sure!

  30. thacker – Again, sorry you’re having problems. We’re trying to track down the issue.

    On the question of external style sheets, yes, you can store code in the head, in a new external style sheet or in an existing one. If you choose an existing one, Sculptor checks to make sure there are no conflicts with existing IDs and notifies you if it finds any.

    Mike – T-Shirts! Yes! How could I have overlooked that marketing opportunity!?!

  31. Oh snap! I missed your WRUW gear yesterday due to slow server loads. Rock on!

  32. Pingback ::

    Trevor Davis | Blog » It’s Still a Stinking WYSIWYG

    […] the other day, Eric Meyer announced that he has been working with WebAssist to create Eric Meyer’s CSS Sculptor. It’s a […]

  33. Eric,
    Nice product. When the kinks are worked out with the video perhaps it could make it to The Deck.

  34. I read metal horns, then I clicked.

    Wow. That’s funny.

    Wish I would have had this product a few years back, good stuff.

  35. Hey Joe,

    Thanks for NOT emailing me back… further proof of your crappy support!

    I’d avoid working with this company in the future Eric.

  36. leadx – I was told you were working with another of our customer reps and didn’t want to duplicate their efforts. Did that not happen?

  37. No one has ever resolved my issues….

    I have had nothing but the run around with Webassist. I can promise to spread the good word everywhere. :) I’m just finishing a detailed blog post about my experience.

  38. leadx – That’s not what our records show. Our sales rep spoke with you several times on Friday and we processed a refund to your PayPal account at 3:48 PST. I’m looking at a response from PayPal that indicates the refund was issued.

    I called and left a message at your office. Please call me back so we can clear up this issue.

  39. Hi Eric,

    Wow, this does look pretty cool! The tree structure view looks especially helpful! It would definitely save time in the design process (except when I started playing with all the options)!

    How is the HTML source order arranged in the CSS Sculptor designs?

    All the CSS layouts that ship with Dreamweaver CS3 use source orders that put the sidebar content before the main content, even in designs with right column sidebars.

    I was surprised by this. I thought there was a goal or standard that recommended putting the main content section first (following the header) for accessibility and search engine use (such as described in Matthew Levine’s article “In Search of the Holy Grail” on A List Apart).

    Is that still something to aim for?

    Can you comment on proper source order and what you use in CSS Sculptor?

    Thanks!

  40. Pingback ::

    Max Design - standards based web design, development and training » Some links for light reading (28/8/07)

    […] CSS Scuplture […]

  41. Ok. I have to ask, but I’ll apologize now if I missed the latest something something, though I try to keep up with the ‘Jones’ (and Meyers) on all this CSS stuff…

    Your sample code uses pixels for font sizing? (Right off the bat for H1 and H2) The units are changeable, correct?

  42. Pingback ::

    Tripix.net » Blog Archive » YAML - Otro generador de Layouts CSS

    […] a la hora de hacer sus maquetas en CSS. A rejillas como YUI Grids o Blueprint y herramientas como CSS Sculptor de Eric Meyer o Constantinology se une ahora YAML Builder, que mediante un interesante interfaz realizado en […]

  43. Watching the feature tour now, looking really good…But, no captioning! The CC button is there, but when I click it, just a blue bar is added to the bottom of the movie display, just above the controls. I am hard of hearing, and the captions would have been appreciated – I am not good at following along with audio presentations like this.

    I’ve seen captions in other flash videos (e.g. feature tours for Adobe CS3 products) and that was great, so I was bummed not to get it here as well.

  44. Hi Cam – I can comment on the DW CS3 layouts since I wrote those. :) You said, “All the CSS layouts that ship with Dreamweaver CS3 use source orders that put the sidebar content before the main content, even in designs with right column sidebars.

    I was surprised by this…”

    There was a reason for that. The DW CS3 layouts shipped within a product with a huge user base that has a wide range of user expertise. Within the product there was no real method of supporting them (save the commenting… but no user manual, etc). We opted for consistency to avoid confusion.

    Some of the layouts (specifically the hybrids) would be more complicated to create when floating all columns and using source order techniques. Thus, the decision was made to keep them all consistent and avoid confusion from layout type to layout type. That said, I’m completing a book about the layouts (using and extending them) so I have the ability to address customization there. But I did not have it within the product itself.

    I’ve not seen the code that Web Assist and Eric created (so I can’t answer that source order question), but having a user interface as they do, they probably have more options in these areas. (Though I’d bet there were decisions made on their end as well where certain methods of coding might have been passed by to avoid “newbie confusion.” It’s the price you pay for a mass-marketed product.)

    Hope that helps… :)
    Stef.

  45. Pingback ::

    Webdesign und Usability » Blog Archiv

    […] übersetzt wurden), bei Lynda.com sogar einen Screencast dazu aufgenommen und nun gibt es den CSS Sculptor von ihm. Achtung: Diesen Abschnitt nur dann weiterlesen, wenn man/frau mit Dreamweaver ab Version 8 […]

  46. Pingback ::

    ) design collected ( :: links for 2007-09-14

    […] Eric’s Archived Thoughts: CSS Sculptor Released Eric Meyer”s CSS Sculptor (v1.0.0), a Dreamweaver extension that gives the user tons of options and outputs pretty darned clean markup and CSS. (tags: webdesign webdevelopment css dreamweaver software) […]

  47. Pingback ::

    Best of August 2007 | Best of the Month

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

  48. Pingback ::

    Nachlese August 2007 - Die Seiten des Monats | Nachlese

    […] CSS Sculptor Eric Meyer veröffentlichte die Release-Version seiner Dreamweaver-Erweiterung, mit der sich vielfältige standardkonforme CSS-basierte Layouts generieren lassen. Preis: 149$ […]

  49. Pingback ::

    Best of August 2007 .

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

  50. Pingback ::

    lost node » Blog Archive » Best of August 2007

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

  51. it looks nice and all but it’s still dreamweaver. And there is still no Real sudo-wysiwyg tool for css that tries to blur code v.s. layout in a proper way. Much akin to Apples Pages or indesign, Pages does not make code good at all, but it’s layout athestictics are sweet

  52. Thank you! I can now make the jump from based coding :-)
    *duck and covers’s*

  53. that should be <table> based coding above…

  54. Pingback ::

    » Best of August 2007

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

  55. Very good extension. The only feature missing, is a way to order the blocks, eg. display content before sidebars, essential for SEO.

    Here’s what they told me…

    “There is no option in CSS sculptor for changing the order that content blocks are generated in. This is a change you would need to make manually after the pages have created.

    I will add a feature request for engineers to consider in a future version of CSS Sculptor.”

    …Fingers crossed it gets added.

  56. I was disappointed to hear how you had your contract structured with WebAssist. As a WA affiliate, I’d like to see you getting a cut of the pie when I sell your product (as would you I’m sure). Hopefully the way you’ve structured your compensation will end up better than the alternative! Thanks for helping WA put out a great product.

  57. Due to bugs in version 1, I was never able to get it to run successfully on my system. WA support was unable to help me. The version I had would crash after I had spent considerable time tweaking the look. Pretty frustrating. Now I hear there is a version 2.0 version. I’d be tempted to try it, but there is no upgrade pricing. After being burned once, I’m reluctant to fork out full retail pricing again for a product I already paid for.

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview