Alister Cameron // Blogologist

I’ve been talking for months now about the integration of the wonderful Sandbox and the Yahoo User Interface CSS library. Well, I’ve done it.

It’s codenamed Vanilla and it’s in “closed Alpha” just for now.

But with all things new, I need some people to step up to the mark and help me test it, refine it and so on. You can do that in the comments below (more about that in a moment).

So what’s the big deal?

The BIG Deal: One Theme, Many Layouts

To my mind, the “Holy Grail” of Wordpress theme design is to create themes that look great and are truly flexible. Sure, there’s all that stuff about standards, but bloggers first and foremost choose themes that make their blog look good, and allow them a degree of straightforward flexibility when it comes to making their own customizations.

Up until now that flexibility has been pretty limited. It’s meant being able to change the header graphic, some colours here and there, and so forth. But I reckon we can do better than that!

So Vanilla adds a simple admin screen offering most of the layout options available with the YUI grids. This means that theme developers can now create new Wordpress themes (or retro-fit old favourites) so that they can accommodate any one of dozens (maybe hundreds?!) of different layout combinations.

This means Bill the Blogger can use the same theme for his “no-nonsense” one-column blog (with sidebar content at the bottom of the page), while someone like me can choose a three-column layout with, say, both primary and secondary columns on the right-hand-side, or one column on each side, or whatever!

Think about how a theme built on top of the Vanilla platform is more useful and flexible to a newbie blogger than all of the themes out there now!

Think about it… the whole reason why the Wordpress Theme Viewer groups the themes according to how many columns they have is because they’re hard-coded that way! You can’t change them to a different column layout without some serious coding, and most bloggers are not up for that.

(Maybe the Wordpress Theme Viewer will need to include a new category for Vanilla-built themes… “universal” or something!)

If you’re a theme designers, you might like to consider how many bloggers are not using a given theme of yours, just because the layout/column setup is not to their liking (much as they might have loved the overall design).

Well, no more!

Vanilla gives you the best of both worlds: firstly it’s built on the Sandbox, which is hands-down the best semantic markup you could hope to built a Wordpress theme on. Then there’s the YUI CSS library, not least the Grids system, which provides the awesome power to create one theme with a huge number of layout options.

Here’s what the Vanilla Settings page looks like (in Wordpress Admin):

Vanilla Theme Settings

Vanilla’s settings page (in Wordpress Admin) lets you rapidly choose a one-, two- or three-column layout, along with a number of options for page widths and column positions. This gives you literally hundreds of layouts (i.e. column combinations) to choose from!

Here’s what the settings form looks like. Just three select-boxes does the trick:

Page Width

This setting determines the overall width of the entire content of your page (not the browser window width, of course). You have three fixed-width options, which are all centered, and one full-width (100%) option.

Outer Column

The outer column can be set to one of three fixed widths, and either to the left or right of the page. It is a quirk of YUI CSS Grids (and related to IAB “standards”) that these widths differ slightly between the left-hand and right-hand positions on the page.

Inner Column

The width of the inner column is measured relative to the width of the main content area. For the three fixed page width options, the inner sidebar also has a fixed width, however for the 100% page-width option, the inner sidebar width is “fluid” and will proportionally resize, relative to the browser window (as will the content area).

Layout Notes

1. The leftmost sidebar column will always contain the primary sidebar, meaning that if both sidebar columns are used (whether set to the same side of the page or not), the primary sidebar will always appear to the left of the secondary sidebar.
2. For a one- or two-column layout (where either the outer or inner sidebar column is set to “none”, or both) the displayed column will contain both the primary and secondary sidebars, the latter following on immediately from the former. In the case of a one-column layout (where no outer or inner sidebar column is used) the primary and secondary sidebars will appear below the content area.

(Understanding the “why” behind these points requires an appreciation of how YUI CSS Grids have been designed to work.)

Using the YUI Grid Builder

By far the easiest way to play around with Vanilla’s layout settings (and to learn how the Grids work) is to use the YUI Grid Builder. Once you are happy with what you see there, enter those settings into the form on the Vanilla settings page and you’ll have the same layout structure in Vanilla.

Important note: Vanilla’s use of the YUI CSS grid system is limited, compared to the YUI Grid Builder (in terms of row and column options). This is reflected in the range of choices available for the inner column (a couple of the YUI CSS Grid options you can play with in the Builder make no sense for a blog layout).

Theme Developer Notes

Design one theme with many layout options.

If you know your CSS well enough you should be able to design a great looking theme that won’t break, no matter what layout options are selected above. Go on, I dare you!

You’re ahead before you’ve started.

The YUI CSS library means your theme development starts ahead of the rest. The strange differences between browsers have been cleaned up, there’s a rock-solid grid to build off, and the optional Base.css file gives you a headstart on default CSS settings for the most common elements.

Very minor differences from the Sandbox.

Vanilla is based on the Sandbox theme, with just four renamed elements:

1. div#wrapper is renamed div#doc/doc2/doc3/doc4
2. div#header is renamed div#hd
3. div#container is renamed div#bd
4. div#footer is renamed div#ft
5. Err, nothing. That’s it!

YUI CSS requires the addition of extra DIVs and classes, but these need not be styled, as a rule.

Tricked up sidebars, but they take care of themselves.

Vanilla’s “logic” controlling the display of sidebar content (and the surrounding HTML markup) is, well, messy. But the good news is you’re still just styling div.sidebar and/or div#primary and div#secondary.

Converting existing Sandbox themes (skins) is easy!

In light of the above, you should by now realize that converting an existing Sandbox theme to Vanilla is pretty easy. (I converted Sandpress–the Sandbox competition’s winning entry–in just a couple of hours, having never looked at the CSS before. And this wasn’t just a conversion to the grid, but to YUI’s Reset CSS as well.)

So Who Wants To Play!?

Vanilla will remain in “closed Alpha” for as short a time as possible. The purpose of this is to avoid releasing the theme with too many embarrassments to myself! No, but seriously, I’d rather get some key theme designers to give it a run through its paces first, so we can iron out the most obvious issues. I’d rather fewer bug releases at the start so what people get first up is at least stable and tested.

Secondly, I’m hoping Vanilla can go to beta with a few simple themes ready for release, which demonstrate these exciting new capabilities.

For all this to happen quickly and with little fuss, I’d like to send out an invitation to accomplished Sandbox and/or Wordpress theme developers and designers, who’d like to take Vanilla for a serious “spin”. My simple criteria are that a) you have already created at least one Wordpress theme for public consumption, and b) you have time to either play around creating a new one on Vanilla or retro-fitting an existing theme for Vanilla.

If you have developed a popular Wordpress theme that you’d be prepared to rework for Vanilla, I’d especially like you to get involved.

Either way, please apply to join the Alpha test in the comments below, or via my contact form, or by email to .

Let’s make this BIG!

(Oh yeah, and I won’t be emailing people with updates and stuff. Please subscribe to my RSS feed for that.)