More Snippet Love

Anyone who's attended my WUC workshops or classes knows that I love WebGUI snippets. They're incredibly versatile and are simple to use.  Recently I worked on a client project where I developed an even deeper love for these wonderful assets, and I thought I would share my experience.

What makes Snippets so useful is that they are chameleons. Whatever is put into a snippet can become a style sheet, a javascript, an XML file, a text file or straight up HTML. Well what if you AssetProxy something into a snippet, wouldn't it become that as well? In fact, yes, it would.

Now, although I'd love to lay out my entire project for a Design Squid article, I've got to tell you that I don't have the patience to write it, and most likely my readers wouldn't have the patience to read it. But, here's the general idea.

I created a collaboration system that allowed users to enter in hex color values for various page elements, attach a background image and assign a name to that collection of values. I then created another Collaboration System template that looked like something you'd see out of a style sheet. Here's a small code example:

<tmpl_loop post_loop>
/*############ <tmpl_var title> LAYOUT ############*/
#mainLayout .<tmpl_var title>Layout {
    background: #<tmpl_var userDefined1> url(<tmpl_var image.url>) no-repeat top left;
    padding-top:15px; 
}
...more template code...
...recipe for brownies...
</tmpl_loop>

I created a Shortcut to the Collaboration System and used the override feature to select this CSS-like template. Then I AssetProxy'd that shortcut (which I made a custom template for to remove all the extra html a shortcut normally has) into a snippet that I was using as the site's main CSS file.

Just like that, I created a dynamic stylesheet. I found this to be a pretty heady discovery. If this can be done with a collaboration system, think of the possibilities. Using a collaboration system in conjunction with snippets, you can create user editable stylesheets, javascripts, and more. There's so many possibilities, it has this designer pretty excited.

Tune in next week, as I cover how you can use the GroupText macro to detail your car.