Generated Semantic Classes II: For CSS Artists

Scott and I are getting a lot done on this Sandbox theme: more classes, better markup and a little admin page that lets you choose stylesheets. The farther we get into the project, I think we’re doing this for CSS artists more than anyone. I’d be working on it now but Scott is carrying the code torch at the moment so I’ll blog about it.

The classes now include several data points that we had never thought of including before. Some of these come from existing problems. How do you know if a comment was written by the post’s author? The bypostauthor class makes this data available to CSS and javascript. What if you want to differentiate registered users’ comments from the braying of barnyard animals? Classes byuser and commentauthor-n make it possible. What if you want to rotate stylesheets for different times of day or year? Classes h00-h23, d01-d31, m01-m12, and y2006-etc. are your panacea. Oh, you wanted to style posts based on their timestamps? p-h00…

These classes are definitely overkill but that’s exactly what we’re going for. Did you predict c-h00 for comments? It’s in there. The more classes we add, the richer we’ll be in terms of people trying to use them in CSS and javascript. We’re doing this for the artists, not the bandwidth-pinchers. No pinch, no pinch. Even so, it’s super-simple to remove unwanted dynamic classes. Just find <?php sandbox_post_class() ?> and replace it with post or whatever.

The HTML we generate now is better than it was before, and probably better than most existing themes, but it’s not perfect yet. In coding this theme, my primary intention has been to empower CSS artists. That includes generating pretty HTML. If you have to indent the HTML by hand just to understand it, you aren’t going to enjoy skinning it. The secondary goals of making bloggers and blog readers happy will be very well served if the designers enjoy their work.

CSS artists shouldn’t need to muck around with the PHP code. Given straightforward markup with plenty of selectors, there isn’t much that can’t be accomplished with CSS and a decent browser. Even so, we’re doing all we can to make this theme’s PHP code accessible to beginning coders. Hopefully they can learn some good habits from us, if we have any!

The admin interface is going to be as simple as possible: it looks for stylesheets (*.css) in a subdirectory and lets you pick one of them. If the stylesheet has a screenshot (*.png) it will be shown. You can add stylesheets to the interface by dropping them in the folder–the theme detects them automatically and presents them as options along with a screenshot if one is present.

A small number of checkboxes may exist (just one is there now experimentally) to let you suppress the output of certain markup. The downside to adding checkboxes is that each one increases the possibility of utterly breaking a stylesheet, thereby increasing the work of the artist who wants the theme to be flexible enough (bulletproof enough). It’s enough that they have to deal with the unknown markup of posts and widgets! And we are doing this for the artists.

Actually we’re doing it for the bloggers, too.

Although I do consider myself styleblind, I did tackle the problem of creating the first complete Sandbox skin. Actually I dropped in the Kubrick stylesheet and tweaked it to work with Sandbox. It does a very nice job of emulating Kubrick, with a few improvements. The exercise gave me a chance to see the HTML in a new light and I’m still making changes based on the experience.

I’m interested to know what ideas you might have on the subject, whether you’re a coder or a CSS artist or a walrus. Oh, you want to see the HTML already? Soon. Very soon.