Andy Skelton?

Yeehaw, it's another blog! I'll try and stick to topics relating to WordPress and Automattic, Inc. Of course, nothing here is edited or approved by Automattic or any other entity. These are my views. Your mileage may vary.

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.

18 thoughts on “Generated Semantic Classes II: For CSS Artists”

I wonder what you’ve got in mind for the users out there who want to alter the number of columns. What I like about the Kubrick theme is its one column-ness, but even that theme has some sidebar action going on.

Of course, semantically, they’re not even “columns” or “sidebars” exactly…

Dylan — Don’t think we’ve made another Kubrick mod. What the Sandbox aims to do is provide semantic, thoughtful markup that can accommodate practically any design and behave ‘dynamically’ with scripts and CSS without messing with markup.

Right now there are six (six?) different fluid layouts, Kubrick, and my favorite: no style. The styles don’t build on one another, but they can, and that’s very cool.

Very exciting indeed. I can’t wait to see what kind of designs get produced by CSS artists using the completed Minimalist Sandbox (really makes me wish I’d waited a few more weeks before switching to WP).

I think someone mentioned CSS Zen Garden in the previous post, and I hope we get to see something exactly like that: a demo site running Minimalist Sandbox, with a CSS switcher javascript link to try on different CSS skins using exactly the same semantic markup.

I am a walrus. I am not THE walrus – that was Paul. But I can speak on behalf of walruses everywhere when I say, this is just the kind of thing we’re looking for. That, and perhaps WordPress localized for Walrussian. And a keyboard that works better with EITHER tusks OR flippers – that would be good, too.

“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!”

Magic tricks with PHP are fun, but sometimes you just want to make a theme that looks good and is thoughtfully marked-up—not spend an hour considering if the date should be wrapped in a p or a div. So we’ve considerately done that for you. It’s a Sandbox. It’s your sandbox 😀